Оглавление

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

Для изменения атрибутов стилей предназначены следующие методы.
сss()— позволяет получить или установить значение отдельных атрибутов CSS. Метод имеет несколько форматов.
  сss(<Название атрибута>)
  сss(<Название атрибута>, <3начение>)
  сss(<Объект с атрибутами>)
  сss{<Название атрибута>, <Функция обратного вызова>)
Первый формат метода позволяет получить значение указанного атрибута для первого элемента коллекции. Значение возвращается в виде строки.


Составное название атрибута может быть таким, как принято в 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");
Метод css() возвращает указатель на коллекцию 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 w  = $(window).width();
var h =  $(window).height();
$("#div1").html("Ширина: " + w + "<br>Высота: " + h);

В результате будет выведено, например, следующее.
Ширина: 1024

Высота: 768

 

В качестве еще одного примера выведем ширину и высоту элемента с помощью методов 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:2OOpx;border:dotted;">
</div>


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

Значения методов:
Ширина: 300
Высота: 40
Значения атрибутов стиля:
Ширина: 300px
Высота: 100px

 

Как видно из примера, значения атрибутов стиля содержат единицы измерения, тогда как методы возвращают значение в виде числа.

 

width(<3начение>) и height(<3начение>) — позволяют задать ширину и высоту всех элементов коллекции соответственно. Возвращают объект 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 PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Методы width() и height()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
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>

 

Demo

 

Если ввести значение и щелкнуть на кнопке Задать новые значения, будет вызван обработчик события onclick. С помощью метода val() мы получаем значения, введенные в текстовые поля, и сохраняем их в переменных. Далее проверяем значения на пустоту. Если поле не пустое, то пытаемся преобразовать строку в число. Прежде чем присвоить новое значение, проверяем, не вернул ли метод parselnt() значение NaN, с помощью метода isNaN(). Далее задаем новое значение и очищаем поле ввода. Если в поле была введена строка, а не число, то выводим предупреждающее сообщение. Затем обновляем данные в элементе с идентификатором div2 при помощи функции showValue(). Обратите внимание на следующие строки.

   $("#div2")
      .html("Ширина: " + elem1.width() + " ")
      .append(msg);


Здесь мы вначале получаем элемент, а затем выводим ширину с помощью метода html(). После изменения содержимого элемента метод html() возвращает ссылку на полученный ранее элемент. По этой причине мы можем производить с ним дальнейшие манипуляции. В данном случае мы добавили в конец элемента значения других методов. Создание таких цепочек вызовов — характерная особенность библиотеки jQuery. Практически все методы возвращают объект jQuery, если, конечно, не возвращают какого-либо другого значения. Так, например, метод width() без указания параметра возвращает значение в виде числа, а при указании параметра — объект jQuery.

 

Обратите также внимание на расположение методов в цепочке. Мы можем указывать каждый метод в отдельной строке. Более того, можно между вызовами методов в цепочке вставлять комментарии.


$("#div2")
   // Выводим ширину элемента
   .html("Ширина: " + elem1.width () + " ")
   // Выводим остальные значения
   .append(msg);

Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити