Нашли ошибку или опечатку? Выделите текст и нажмите

Поменять цветовую

гамму сайта?

Поменять
Обновления сайта
и новые разделы

Рекомендовать в Google +1

Работа с CSS

87

»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.

Библиотека jQuery предоставляет ряд удобных специализированных методов, значительно упрощающих работу со стилями CSS. Одним из наиболее широко используемых методов такого рода является метод css(), краткое описание которого приведено в таблице ниже:

Метод css()
Метод Описание
css(имя) Возвращает значение указанного свойства для первого из элементов, содержащихся в объекте jQuery
css(имя, значение) Устанавливает значение указанного свойства для всех элементов, содержащихся в объекте jQuery
css(объект отображения) Устанавливает одновременно несколько свойств для всех элементов, содержащихся в объекте jQuery, с помощью объекта отображения
css(имя, функция) Устанавливает значения указанного свойства для всех элементов, содержащихся в объекте jQuery, с помощью функции

При считывании значений свойств с помощью метода css() вы получаете значение свойства, которое имеет первый из элементов, содержащихся в объекте jQuery. В то же время при установке свойства вносимое изменение применяется ко всем элементам набора. Пример простейшего использования метода css() приведен ниже:

$(function() {
        
    var sizeVal = $('label').css("font-size");
    console.log("Размер шрифта: " + sizeVal);
    $('label').css("font-size", "1.5em");
	
});

В этом сценарии мы выбираем все элементы label, получаем с помощью метода css() значение свойства font-size и выводим его на консоль. Затем мы вновь выбираем все элементы label и присваиваем новое значение этого же свойства всем элементам.

Несмотря на то что в сценарии используется фактическое имя свойства (font-size), а не его запись с применением регистра, т.е. форма записи, в которой это свойство определено в объекте HTMLElement (свойство fontSize), оно также воспринимается корректно, поскольку jQuery поддерживает оба варианта.

В результате работы данного сценария на консоль выводится следующий результат:

Получение и установка CSS-свойств с помощью jQuery

Установка для свойства значения в виде пустой строки ("") равносильна удалению этого свойства из атрибута style данного элемента.

Установка одновременно нескольких свойств CSS

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

$(function() {
        
    $('label').css("font-size", "1.5em").css("color", "blue");
	
});

В этом сценарии устанавливаются значения свойств font-size и color. Того же эффекта можно добиться, используя объект отображения, как показано в примере ниже:

$(function() {
        
    var cssVals = {
        "font-size": "1.5em",
        "color": "blue"
    };
  
    $('label').css(cssVals);
	
});

Оба варианта сценария приводят к одному и тому же результату, показанному на рисунке:

Одновременная установка нескольких CSS-свойств

Установка относительных значений

В качестве аргументов метод css() может принимать также относительные значения. Они представляют собой числовые значения, которым предшествуют знаки += и -= и которые добавляются или вычитаются из текущего значения. Этот прием можно использовать лишь в отношении числовых величин. Соответствующий пример приведен ниже:

$(function() {
        
    $('label:odd').css("font-size", "+=5")
    $('label:even').css("font-size", "-=5")
	
});

Относительные значения выражаются в тех же единицах, что и значения свойств. В данном случае размер шрифта увеличивается на 5 пикселей для нечетных элементов label и уменьшается на ту же величину для четных. Результат показан на рисунке:

Использование относительных значений

Установка свойств с помощью функции

Можно устанавливать значения свойств динамически, передавая функцию методу css(). Соответствующий пример приведен ниже:

$(function() {
        
    $('label').css("border", function(index, currentValue) {
        if ($(this).closest("#row1").length > 0) {
            return "thick solid red";
        } else if (index % 2 == 1) {
            return "thick double blue";
        }
    });
	
});

Аргументами, передаваемыми функции, являются индекс элемента в наборе и текущее значение свойства. Переменная this ссылается на объект HTMLElement, соответствующий элементу, а функция возвращает значение, которое требуется установить.

Использование специализированных методов для работы со свойствами CSS

В дополнение к методу css() в jQuery определен ряд специализированных методов, предназначенных для получения или установки значений конкретных свойств. Перечень этих методов приведен в таблице ниже:

Методы для работы с конкретными свойствами CSS
Метод Описание
height() Возвращает высоту (в пикселях) первого из элементов, содержащихся в объекте jQuery
height(значение) Устанавливает высоту для всех элементов, содержащихся в объекте jQuery
innerHeight() Возвращает внутреннюю высоту (т.е. высоту элемента, включая внутренние отступы, но исключая границы и поля) первого из элементов, содержащихся в объекте jQuery
innerWidth() Возвращает внутреннюю ширину (т.е. ширину элемента, включая внутренние отступы, но исключая границы и поля) первого из элементов, содержащихся в объекте jQuery
offset() Возвращает координаты первого из элементов, содержащихся в объекте jQuery, относительно начала документа
outerHeight(логическое_значение) Возвращает высоту первого из элементов, содержащихся в объекте jQuery, включая внутренние отступы и границы. Аргумент определяет, должен ли при этом учитываться размер полей
outerWidth(логическое_значение) Получает ширину первого из элементов, содержащихся в объекте jQuery, включая внутренние отступы и границы. Аргумент определяет, должен ли при этом учитываться размер полей
position() Возвращает координаты первого из элементов, содержащихся в объекте jQuery, относительно его родительского элемента, у которого задан тип позиционирования
scrollLeft(), scrollTop() Получает значение отступа прокрутки слева или сверху для первого из элементов, содержащихся в объекте jQuery
scrollLeft(значение), scrollTop(значение) Устанавливает значение отступа прокрутки слева или сверху для всех элементов, содержащихся в объекте jQuery
width() Получает ширину первого из элементов, содержащихся в объекте jQuery
width(значение) Устанавливает ширину для всех элементов, содержащихся в объекте jQuery
height(функция), width(функция) Устанавливает высоту или ширину всех элементов, содержащихся в объекте jQuery, с помощью функции

Названия большинства этих методов говорят сами за себя, однако некоторые из них нуждаются в дополнительных пояснениях. Методы offset() и position() возвращают объект, имеющий свойства top и left, которые указывают положение элемента. Пример использования метода position() приведен ниже:

$(function() {
        
    var pos = $('img').position();
    console.log("Позиция элемента сверху: " + pos.top + " слева: " + pos.left);
	
});

Этот сценарий выводит на консоль значения свойств top и left объекта, возвращаемого данным методом. Результат выглядит следующим образом:

Получение координат элемента

Установка ширины и высоты с помощью функции

Ширину и высоту элементов набора можно устанавливать динамически, передавая методам width() и height() функцию в качестве аргумента. Аргументами функции являются позиция элемента в наборе и текущее значение свойства. Как вы уже сами могли догадаться, переменная this ссылается на объект HTMLElement, соответствующий текущему обрабатываемому элементу, а функция возвращает значение, которое требуется установить. Соответствующий пример приведен ниже:

$(function() {
        
    $('#row1 img').css("border", "thick solid red")
        .height(function(index, currentValue) {
            return (index + 1) * 25;
    }); 
	
});

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

Использование функции для установки высоты элементов
Пройди тесты