Работа с 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~