Работа с CSS

Веб-программирование --- jQuery --- Работа с CSS

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

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

При считывании значений свойств с помощью метода 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 поддерживает оба варианта.

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

Установка для свойства значения в виде пустой строки ("") равносильна удалению этого свойства из атрибута 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() может принимать также относительные значения. Они представляют собой числовые значения, которым предшествуют знаки += и -= и которые добавляются или вычитаются из текущего значения. Этот прием можно использовать лишь в отношении числовых величин. Соответствующий пример приведен ниже:

$(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 определен ряд специализированных методов, предназначенных для получения или установки значений конкретных свойств. Перечень этих методов приведен в таблице ниже:

Названия большинства этих методов говорят сами за себя, однако некоторые из них нуждаются в дополнительных пояснениях. Методы 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;
    }); 
	
});

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