Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Изменение атрибутов CSS
Для изменения атрибутов стилей предназначены следующие методы.
css()
— позволяет получить или установить значение отдельных атрибутов CSS. Метод имеет несколько форматов.
css(<Название атрибута>)
css(<Название атрибута>, <Значение>)
css(<Объект с атрибутами>)
css(<Название атрибута>, <Функция обратного вызова>)
Первый формат метода позволяет получить значение указанного атрибута для первого элемента коллекции. Значение возвращается в виде строки.
Составное название атрибута может быть таким, как принято в CSS (например, background-color
) или в JavaScript (например, backgroundColor
). В качестве примера выведем цвет фона первого элемента DIV
.
alert($("div").css("background-color"));
<div id="div1" style="background-color:red">Текст</div>
<div id="div2" style="background-color:blue">Текст</div>
Результат выполнения этого примера зависит от браузера. Так браузер Opera возвращает значение "#ff0000"
, в то время как браузер Internet Explorer 7 —название цвета ("red"
). Иными словами, Internet Explorer возвращает значение, указанное в атрибуте стиля. Если указать значение "#ff0000"
:
<div id="div1" style="background-color:#ff0000">Текст</div>
то он вернет именно это значение. В случае, если цвет фона элемента не задан, то мы получим значение "transparent"
.
Второй формат метода css()
позволяет задать значение указанного атрибута для всех элементов коллекции. Сделаем цвет фона всех абзацев красным.
$("p").css("background-color", "#ff0000");
Метод возвращает указатель на коллекцию jQuery. По этой причине мы можем изменить еще несколько атрибутов, составив цепочку вызовов метода css()
. Сделаем цвет фона всех абзацев красным, а цвет текста — белым.
$("p").css("backgroundColor", "red").css("color", "#ffffff");
Третий формат метода css()
позволяет задать сразу несколько атрибутов за один вызов метода. Для этого атрибуты и значения должны быть указаны следующим образом.
{
Атрибут1: "Значение1",
Атрибут2: "Значение2",
...
АтрибутN: "ЗначениеN"
}
Если название атрибута содержит дефис, то название необходимо заключить в кавычки. Для примера сделаем цвет фона всех заголовков первого уровня черным, цвет текста — белым, а также зададим размер и название шрифта.
$("h1").css(
{
backgroundColor: "#000000",
color: "#ffffff",
"font-size": "18pt",
"font-family": "Tahoma"
}
);
Такой объект можно сохранить в переменной, а затем передать его в качестве параметра метода css()
.
var obj = { fontSize: "18pt", fontFamily: "Tahoma" }
$("h1").css(obj);
Четвертый формат метода css()
позволяет выборочно задать значение указанного атрибута, в зависимости от каких-либо условий. В параметре <Функция обратного вызова>
указывается ссылка на функцию следующего формата.
function <Название функции>([<Индекс>]) {
// ...
}
На каждой итерации в функцию передается ссылка (this
) на текущий DOM-элемент. Чтобы задать значение атрибута, необходимо внутри функции обратного вызова вернуть новое значение. Если в параметре указать переменную, то через нее будет доступен индекс текущего элемента в коллекции. В качестве примера сделаем так, чтобы все ссылки, имеющие абсолютный URL-адрес, были выделены красным цветом.
$("a").css("color", function() {
var pattern = /^http:\/\//i;
if (pattern.test(this.href)) {
return "red";
}
else {
return "black";
}
});
width()
иheight()
— позволяют получить ширину и высоту первого элемента коллекции соответственно. Возвращают значение в виде числа. Для примера выведем ширину и высоту доступной области окна браузера.
var width = $(window).width();
var height = $(window).height();
$("#div1").html("Ширина: " + width + "<br>Высота: " + height);
В результате будет выведено, например, следующее.
Ширина: 1022
Высота: 734
В качестве еще одного примера выведем ширину и высоту элемента с помощью методов width()
и height()
, а для сравнения выведем также значения соответствующих атрибутов стиля.
var elem = $("#div1");
$("#div1").append("<b>Значения методов:</b><br>");
$("#div1").append("Ширина: " + elem.width() + "<br>");
$("#div1").append("Высота: " + elem.height() + "<br>");
$("#div1").append("<b>Значения атрибутов стиля:</b><br>");
$("#div1").append("Ширина: " + elem.css("width") + "<br>");
$("#div1").append("Высота: " + elem.css("height") + "<br>");
<div id="div1"
style="width:300px;height:200px;border:dotted;">
</div>
В результате будет выведено следующее:
Значения методов:
Ширина: 300
Высота: 200
Значения атрибутов стиля:
Ширина: 300px
Высота: 200px
Как видно из примера, значения атрибутов стиля содержат единицы измерения, тогда как методы возвращают значение в виде числа.
width(<Значение>)
иheight(<Значение>)
— позволяют задать ширину и высоту всех элементов коллекции соответственно. Возвращают объект jQuery. Зададим ширину всех элементовDIV
, а затем укажем цвет фона.
$("div").width(50).css("background-color", "#ff0000");
Значением параметра может быть не только число, но и строка.
$("#div1").width("500px");
$("#div2").width("90%");
innerWidth()
иinnerHeight()
— возвращают соответственно ширину и высоту первого элемента коллекции. Методы учитывают значение атрибутаpadding
, но не учитывают толщину линии рамки.outerWidth([true])
иouterHeight([true])
— возвращают соответственно ширину и высоту первого элемента коллекции. Методы учитывают значение атрибутаpadding
и толщину линии рамки. Если в качестве параметра указать значениеtrue
, то методы будут также учитывать значение атрибутаmargin
.
Рассмотрим возможность изменения ширины и высоты элемента путем задания произвольных числовых значений, которые можно вводить в текстовые поля (листинг 5.1).
Листинг 5.1. Методы width() и height()
<!doctype html>
<html>
<head>
<title>Методы width() и height()</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
function showValue() {
var elem1 = $("#div1");
var msg = "Высота: " + elem1.height() + "<br>inner: Ширина: ";
msg += elem1.innerWidth() + " Высота: " + elem1.innerHeight();
msg += "<br>outer: Ширина: " + elem1.outerWidth(true) + " Высота: ";
msg += elem1.outerHeight(true);
$("#div2")
.html("Ширина: " + elem1.width() + " ")
.append(msg);
}
$(document).ready(function() {
$(":button").click(function() {
var w = $("#txt1").val();
var h = $("#txt2").val();
var elem = $("#div1");
if (w != '') {
w = parseInt(w);
if (!isNaN(w)) {
elem.width(w);
$("#txt1").val("");
}
else alert("Необходимо ввести число!");
}
if (h != '') {
h = parseInt(h);
if (!isNaN(h)) {
elem.height(h);
$("#txt2").val("");
}
else alert("Необходимо ввести число!");
}
showValue();
});
showValue();
});
</script>
<style>
#div1 {
padding:5px; margin:5px;
width:300px; height:200px;
border: black 2px dotted;
}
</style>
</head>
<body>
<div id="div1"></div>
<br><b>Текущие значения:</b><br>
<div id="div2"></div><br>
Ширина:<br><input type="text" id="txt1"><br>
Высота:<br><input type="text" id="txt2"><br>
<input type="button" value="Задать новые значения">
</body>
</html>
Если ввести значение и щелкнуть на кнопке Задать новые значения, будет вызван обработчик события onclick
. С помощью метода val()
мы получаем значения, введенные в текстовые поля, и сохраняем их в переменных. Далее проверяем значения на пустоту. Если поле не пустое, то пытаемся преобразовать строку в число. Прежде чем присвоить новое значение, проверяем, не вернул ли метод parseInt()
значение NaN
, с помощью метода isNaN()
. Далее задаем новое значение и очищаем поле ввода. Если в поле была введена строка, а не число, то выводим предупреждающее сообщение. Затем обновляем данные в элементе с идентификатором div2
при помощи функции showValue()
. Обратите внимание на следующие строки.
$("#div2")
.html("Ширина: " + elem1.width() + " ")
.append(msg);
Здесь мы вначале получаем элемент, а затем выводим ширину с помощью метода html()
. После изменения содержимого элемента метод html()
возвращает ссылку на полученный ранее элемент. По этой причине можно производить с ним дальнейшие манипуляции. В данном случае мы добавили в конец элемента значения других атрибутов. Создание таких цепочек вызовов — характерная особенность библиотеки jQuery. Практически все методы возвращают объект jQuery, если, конечно, не возвращают какого-либо другого значения. Так, например, метод width()
без указания параметра возвращает значение в виде числа, а при указании параметра — объект jQuery.
Обратите также внимание на расположение методов в цепочке. Мы можем указывать каждый метод на отдельной строке. Более того, можно между вызовами методов в цепочке вставлять комментарии.
$("#div2")
// Выводим ширину элемента
.html("Ширина: " + elem1.width() + " ")
// Выводим остальные значения
.append(msg);
Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF
Помощь сайту
Yandex-деньги: 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов