Работа с несколькими свойствами

Zepto.js предоставляет компактный и лаконичный интерфейс для работы с DOM, включая эффективное управление стилями элементов. Одной из часто используемых возможностей является одновременное изменение нескольких CSS-свойств. Это позволяет существенно сократить количество кода и повысить читаемость.

Установка и получение нескольких свойств

Метод .css() в Zepto умеет работать с объектами. Для установки сразу нескольких свойств используется запись:

$('selector').css({
    'color': 'red',
    'font-size': '16px',
    'background-color': '#f0f0f0'
});

Ключевые моменты:

  • Ключи объекта — это имена CSS-свойств в кабельной форме (background-color) или в стиле JavaScript (backgroundColor), Zepto корректно их преобразует.
  • Значения — строки с допустимыми CSS-значениями.
  • Метод можно вызвать на любой коллекции элементов, изменения применяются ко всем одновременно.

Для получения значения конкретного свойства можно использовать:

var color = $('selector').css('color');

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

var styles = {};
var element = $('selector').get(0);
['color', 'font-size', 'background-color'].forEach(function(prop){
    styles[prop] = $(element).css(prop);
});

Динамическое управление стилями

В Zepto поддерживается передача функции в .css(). Это позволяет вычислять значения свойств на лету:

$('selector').css({
    'width': function(index, oldValue) {
        return parseInt(oldValue) + 20 + 'px';
    },
    'height': function(index, oldValue) {
        return parseInt(oldValue) * 1.5 + 'px';
    }
});

Особенности работы функции:

  • Первый аргумент index — порядковый номер элемента в коллекции.
  • Второй аргумент oldValue — текущее значение свойства.
  • Возвращаемое значение устанавливается как новое.

Работа с короткими и длинными свойствами

CSS включает свойства, которые имеют «короткую» и «длинную» форму (например, margin и margin-top, margin-right и т.д.). Zepto позволяет управлять как всей группой, так и отдельными направлениями:

$('selector').css({
    'margin': '10px 20px',
    'padding-left': '5px'
});

В этом примере:

  • margin задаёт сразу все четыре стороны.
  • padding-left меняется отдельно, не затрагивая остальные направления.

Цепочка вызовов с несколькими свойствами

Методы Zepto поддерживают цепочки вызовов, что удобно при комплексной работе с элементами:

$('selector')
    .css({'color': 'blue', 'border': '1px solid black'})
    .addClass('active')
    .fadeIn(400);

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

Особенности совместимости

Zepto ориентирован на современный браузерный стек, поэтому:

  • Имена свойств в camelCase (backgroundColor) или с дефисом (background-color) корректно интерпретируются.
  • Значения чисел без единиц интерпретируются как пиксели, если свойство допускает это (width: 100 → 100px).

Практическое применение

Применение нескольких свойств полезно при:

  • Анимациях и изменении размеров элементов.
  • Стилизации динамически создаваемых элементов.
  • Реализации адаптивного интерфейса без написания отдельных правил CSS.

Пример динамического изменения внешнего вида кнопки при наведении:

$('button').on('mouseenter', function() {
    $(this).css({
        'background-color': '#3498db',
        'color': '#fff',
        'box-shadow': '0 4px 8px rgba(0,0,0,0.2)'
    });
}).on('mouseleave', function() {
    $(this).css({
        'background-color': '#fff',
        'color': '#333',
        'box-shadow': 'none'
    });
});

Этот подход демонстрирует полное управление внешним видом через объекты стилей, минимизируя повторение кода.

Резюме методов

Метод Описание
.css(object) Устанавливает сразу несколько свойств через объект.
.css(property) Получает значение одного свойства.
.css(property, value) Устанавливает одно свойство.
.css(objectFunction) Вычисляет значения динамически с помощью функции.

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

Оглавление