jQuery. Изменение атрибутов CSS

Изменение атрибутов 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>");

В результате будет выведено следующее:

Значения методов:
Ширина: 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);