Оглавление

.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";
   }
});
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити