jQuery - Работа со стилем элемента

Статья, в которой разберем, как в jQuery осуществляется работа со стилями (style) элемента.

jQuery - Работа со стилями элемента

В jQuery за работу со стилями HTML элементов отвечает метод css. Он используется не только для чтения стилей у элемента, но также применяется для их установки или изменения.

Как получить стиль элемента в jQuery

Получить значения вычисленного (окончательного) свойства CSS, применённого к элементу, в jQuery выполняется с помощью метода css.

.css('имяСвойства')

Данный метод, если его применить к набору элементов, возвращает значения указанного CSS свойства только для первого элемента этого набора.

Например, определим цвет заднего фона у элемента с id="header":

// получим значение цвета background у элемента с id, равным "header"
var backgroundHeader = $('#header').css('background-color');
// выведем его в консоль
console.log(backgroundHeader);

Если необходимо получить значения указанного CSS свойства у всех элементов текущего набора, то необходимо, например, использовать метод each.

Например, определим значение свойства display у всех выбранных элементов и выведем их в консоль:

// перебрать все элементы с классом container
$('.container').each(function(index){
  // значение css-свойства display текущего элемента набора
  var display = $(this).css('display');
  // выведем результат в консоль (индекс элемента в наборе и его значение css-свойства display)
  console.log(index + '. display = '+ display);
});

Кроме этого метод css позволяет также получить сразу несколько CSS свойств у элемента:

.css(['имяСвойства1','имяСвойства2',...]);

Например, определим при нажатии на HTML элемент button его ширину и высоту:

// при нажатии на элемент div
$('div').click(function(){
  // создадим переменную, которая будет содержать результат
  var output = [];
  // получим значения сразу нескольких CSS свойств
  var cssProperties = $(this).css(['width','height']);
  // переберём полученные свойства полученные свойства
  $.each(cssProperties, function( prop, value ) {
    // добавим в массив элемент, содержащий имя свойства и значения
    output.push( prop + ": " + value );
  });
  //выведем массив в качестве значения элемента
  $(this).html(output.join(';'));
});

Теперь при нажатии на любую кнопку в ней будет выводиться её ширина и высота.

Как задать стиль элементу в jQuery

Установка стиля элементу(ам) осуществляется в jQuery с помощью метода css:

.css('имяСвойства',значение)

Этот синтаксис позволяет применить указанное свойство CSS ко всем элементам текущего набора.

Например, установить всем элементам div с классом info серый цвет фона (background):

$('div.info').css('background','grey');

Если необходимо применить к каждому элементу текущего набора сразу несколько CSS свойств, то в качестве параметра этого метода необходимо использовать объект JavaScript, содержащий пары 'имяСвойства' : значение.

.css({'имяСвойства1':значение, 'имяСвойства2':значение,...})

Например, добавим к каждому элементу p на странице несколько CSS свойств:

$('p').css({
  'color':'green',
  'font-size':'16px'
});

В качестве значения строки также можно использовать относительные значения, которые начинаются с += или -=. Первое выражение используется для увеличения текущего значения CSS свойства, а второе - для уменьшения.

Например, увеличить отступ слева и справа элементов div с классом container на 10px:

$('.container').css({"padding-left": "+=10","padding-right":"+=10"});

Ещё один способ использования метода css - это применение в качестве 2 параметра функции.

.css('имяСвойства',функция)
// функция: Function( Integer index, String value ) => String или Number

Данный вариант употребляется обычно тогда, когда значение, которое необходимо поставить CSS свойству, необходимо определить по некоторому алгоритму.

Например, установим всем элементам p, у которых цвет шрифта не равен чёрному, CSS свойство color, равное red.

$('p').css('color',function(index,value){
  if (value!='rgb(0, 0, 0)') {
    return 'red';
  }
});

Изменение стиля элемента в jQuery осуществляется посредством установки стиля. Т.е. для того чтобы поменять стиль элементу можно воспользоваться в зависимости от ситуации одним из трёх представленных выше методов.

Например, поменяем значение CSS свойства width у всех элементов img на странице, находящихся в блоке с id, равным content:

$('#content img').css('width','300px');

Как удалить определённый стиль у элемента

Для того чтобы в jQuery убрать определённый стиль у элемента, ему необходимо присвоить пустую строку.

Например, уберём у всех изображений на странице CSS свойство height:

$('img').css('height','');


   JavaScript и jQuery 0    211 0

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.