Работа с CSS
.css()
Возвращает или изменяет значения css-величин у выбранных элементов страницы. Функция имеет четыре варианта использования:
.css(styleName):string1.0
возвращает значение css-величины styleName у выбранного элемента. Если выбрано несколько элементов, то значение будет взято у первого.
.css(styleName, value):jQuery1.0
css-величине styleName будет присвоено значение value, у всех выбранных элементов.
.css({styleName1: value1, styleName2: value2, ...}):jQuery1.0
группе css-величин styleName1, styleName2, ... будут присвоены значения value1, value2, ..., у всех выбранных элементов.
.css(styleName, function(index, value)):jQuery1.4
css-величине styleName будет присвоено значение, возвращенное пользовательской функцией. Функция вызывается отдельно, для каждого из выбранных элементов. При вызове, ей передаются следующие параметры: index — позиция элемента в наборе, value — текущее значение css-величины styleName у элемента.
Примеры использования:
| $(".topBlock").css("top") | вернет смещение по вертикали у первого элемента с классом topBlock |
| $(".topBlock").css("top", "5px") | установит смещение по вертикали равным 5px у всех элементов с классом topBlock |
| $(".topBlock").css({"top":"5px", "left":"0"}) | установит смещения по вертикали и горизонтали равными 5px и 0px у всех элементов с классом topBlock |
Замечание: важно отметить, что используя метод .css(styleName) вы получите значения css-величины только первого элемента из всех выбранных. Если вам нужны значения всех элементов, то следует использовать конструкции типа .map() или .each().
В действии
найдем среди списка планет родную землю и выделим ее зеленым цветом:
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~script src="https://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~
~lt~style~gt~
#list{
width:260px;
}
.item{
width: 250px;
height: 20px;
float: left;
margin: 1px;
padding: 3px;
background-color: #EEEEEE;
list-style-type:none;
}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~ul id="list"~gt~
~lt~li class="item"~gt~Меркурий~lt~/li ~gt~
~lt~li class="item"~gt~Венера~lt~/li ~gt~
~lt~li class="item"~gt~Земля~lt~/li ~gt~
~lt~li class="item"~gt~Марс~lt~/li ~gt~
~lt~li class="item"~gt~Юпитер~lt~/li ~gt~
~lt~li class="item"~gt~Сатрурн~lt~/li ~gt~
~lt~li class="item"~gt~Уран~lt~/li ~gt~
~lt~li class="item"~gt~Нептун~lt~/li ~gt~
~lt~li class="item"~gt~Плутон~lt~/li ~gt~
~lt~/ul~gt~
~lt~script~gt~
$("#list .item").css("background-color", function(i,val){
if($(this).text() == "Земля")
return "#cceecc";
else
return val;
});
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
