Работа с CSS

Материал из JQuery

Перейти к: навигация, поиск
.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="http://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~

Ссылки

Поисковые ключи:
  • css значения
  • стили элементов
  • получить значение css-величин
  • изменить значение css-величин
  • установить значение css-величин
  • присвоить значение css-величинам
  • .css()
  • css()