Методы изменения атрибутов CSS

Для изменения атрибутов стилей предназначены следующие методы.

• css () — позволяет получить или установить значение отдельных атрибутов CSS. Метод имеет несколько форматов.


сss{<Название атрибута>)
css{<Название атрибута>,   <3начение>)
css{<Объект с атрибутамu>)
css{<Название атрибута>,   <Функция обратного вызова>)

Первый формат метода позволяет получить значение указанного атрибута для первого элемента коллекции. Значение возвращается в виде строки. Составное название атрибута может быть таким, как принято в CSS (например, background-color) или в JavaScript (например, backgroundColor). В качестве примера выведем цвет фона первого тега <div>.

alert($("div").сss("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 () позволяет задать значение указанного атрибута для всех элементов коллекции. Сделаем цвет фона всех абзацев красным.

$ ("р").сss("background-color",   "#ff0000") ;

Метод css () возвращает указатель на коллекцию jQuery. По этой причине мы можем изменить еще несколько атрибутов, составив цепочку вызовов функции css (). Сделаем цвет фона всех абзацев красным, а цвет текста — белым.

$("р").сss("backgroundColor","red").сss("color","#ffffff") ;

Третий формат метода css() позволяет задать сразу несколько атрибутов за один вызов функции. Для этого атрибуты и значения должны быть указаны следующим образом.

{
Атрибут1: "Значение1",
Атрибут2: "Значение2",
...
АтрибутN: "ЗначениеN"
}

Если название атрибута содержит дефис, то название необходимо заключить в кавычки. Для примера сделаем цвет фона всех заголовков первого уровня черным, цвет текста — белым, а также зададим размер и название шрифта.

$("hl").css({
backgroundColor: "#000000",
color: "#ffffff",
"font-size": "18pt",
"font-family": "Tahoma"
});

Такой объект можно сохранить в переменной, а затем передать его в качестве параметра метода css ().

var obj   =   {   fontSize:   "18pt",   fontFamily:   "Tahoma"   }
$("hl").сss(obj);

Четвертый формат метода css () позволяет выборочно задать значение указанного атрибута, в зависимости от каких-либо условий. В параметре <Функция обратного вызова> указывается ссылка на функцию следующего формата.

function <Название функции>([<Индекс>] ) {
// ...
}

На каждой итерации в функцию передается ссылка (this) на текущий DOM-элемент. Чтобы задать значение атрибуту, необходимо внутри функции обратного вызова вернуть новое значение. Если в параметре указать переменную, то через нее будет доступен индекс текущего элемента в коллекции. В качестве примера сделаем так, чтобы все ссылки, имеющие абсолютный URL-адрес, были выделены красным цветом.

$("а").сss("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);

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

Ширина: 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.сss("width") + "<br>");
$("#div1").append("Высота: " + elem.сss("height") + "<br>");

<div id="div1" style="width:300px;height:200px;border:dotted;"></div>

В результате будет выведено следующее:
Значения методов:
Ширина:   300
Высота:   200
Значения атрибутов  стиля:
Ширина:   ЗООрх
Высота:   200рх

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

•    width {<3начение>)  и height (<Значение>) — позволяют задать ширину и высоту всех элементов коллекции соответственно. Возвращают объект jQuery.

Зададим ширину всех тегов <div>, а затем укажем цвет фона.

$("div").width(50).сss("background-color",    "#ffOOOO");

Значением параметра может быть не только число, но и строка.

$("#div1").width("500px");
$("#div2").width("90%");

• innerWidth () и innerHeight () — возвращают соответственно ширину и высоту первого элемента коллекции. Методы учитывают значение атрибута padding, но не учитывают толщину линии рамки.

• outerWidth( [true] ) и outerHeight ( [true] ) — возвращают соответственно ширину и высоту первого элемента коллекции. Методы учитывают значение атрибута padding и толщину линии рамки. Если в качестве параметра указать
значение true, то методы будут также учитывать значение атрибута margin. Рассмотрим возможность изменения ширины и высоты элемента путем задания произвольных числовых значений, которые можно вводить в текстовые поля

Листинг 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>

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

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

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *