Чтение и установка CSS-свойств

Библиотека Zepto.js предоставляет удобные методы для работы с CSS-свойствами элементов на веб-странице, сочетая компактность с функциональностью, аналогичной jQuery. Работа с CSS в Zepto охватывает чтение и изменение как одиночных, так и множественных стилей элементов.

Получение CSS-свойств

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

var color = $('#element').css('color');
  • Параметр метода — название свойства в camelCase или стандартной CSS-форме (backgroundColor или background-color).
  • Метод возвращает строку, содержащую текущее значение свойства.
  • Если элемент содержит несколько совпадений, css возвращает значение первого элемента коллекции.

Пример чтения нескольких свойств сразу:

var styles = $('#element').css(['width', 'height', 'margin-top']);
console.log(styles.width, styles.height, styles['margin-top']);

Возвращаемое значение в этом случае — объект, где ключи соответствуют переданным свойствам, а значения — их текущие вычисленные значения.

Установка CSS-свойств

Метод css используется и для изменения стилей. Существует несколько вариантов вызова.

Установка одного свойства:

$('#element').css('color', 'red');
  • Первый аргумент — имя CSS-свойства.
  • Второй аргумент — новое значение свойства.

Установка нескольких свойств одновременно через объект:

$('#element').css({
    width: '200px',
    height: '100px',
    'background-color': '#f0f0f0'
});
  • Объект содержит пары ключ-значение, где ключ — имя свойства, а значение — его новое значение.
  • Можно использовать как camelCase (backgroundColor), так и стандартный CSS-формат (background-color).

Работа с числовыми значениями

Для свойств, ожидающих числовые значения с единицами (px, %, em), Zepto автоматически добавляет px, если указано число:

$('#element').css('width', 300); // эквивалентно '300px'

Для свойств без единиц (opacity, zIndex) число передавать можно напрямую:

$('#element').css('opacity', 0.5);
$('#element').css('zIndex', 10);

Чтение и установка свойств у множества элементов

При выборе нескольких элементов через селектор, вызов метода css применяется ко всем элементам коллекции:

$('.box').css('border', '1px solid black');

Чтение свойства возвращает значение только первого элемента:

var border = $('.box').css('border');

Удаление CSS-свойств

Zepto позволяет удалить свойство, установив его значение в пустую строку:

$('#element').css('color', '');

Это эквивалентно удалению inline-стиля для данного свойства.

Особенности работы с вычисленными стилями

Метод css возвращает вычисленное значение, а не значение, указанное в стилевом файле. Например, если в CSS задано width: 50%;, вызов:

$('#element').css('width');

вернет фактическую ширину в пикселях, вычисленную браузером.

Поддержка псевдоэлементов и кастомных свойств

Zepto напрямую не поддерживает чтение стилей псевдоэлементов (::before, ::after). Для этого требуется использовать window.getComputedStyle:

var content = window.getComputedStyle(document.querySelector('#element'), '::before').content;

Кастомные CSS-переменные можно получать и устанавливать через метод css с синтаксисом --variable:

$('#element').css('--main-color', 'blue');
var mainColor = $('#element').css('--main-color');

Анимация CSS-свойств

Хотя Zepto не имеет встроенного комплексного механизма анимации как jQuery, библиотека поддерживает плавное изменение некоторых свойств через метод animate. Например:

$('#element').animate({ width: '300px', opacity: 0.5 }, 400);

Метод принимает объект свойств, длительность анимации и функцию обратного вызова.

Важные нюансы

  1. Порядок единиц измерения. Если у свойства по умолчанию нет единиц, Zepto не добавляет px. Например, lineHeight и opacity — это числа без единиц.

  2. Чтение вычисленных значений всегда возвращает строку, даже если это число. Для арифметики требуется конвертация:

    var width = parseInt($('#element').css('width'), 10);

  3. Совместимость с IE: старые версии IE могут возвращать значения в нестандартном формате (например, auto).

Метод css в Zepto обеспечивает универсальный доступ к стилям элементов, позволяя управлять как одиночными, так и множественными свойствами, с поддержкой числовых значений, кастомных CSS-переменных и совместимости с анимацией. Его компактность и простота делают работу с DOM-стилями удобной и предсказуемой.

Оглавление