Управление свойствами элементов

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

Работа с HTML-атрибутами

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

// Получение значения атрибута
var href = $('a.link').attr('href');

// Установка одного атрибута
$('a.link').attr('href', 'https://example.com');

// Установка нескольких атрибутов одновременно
$('img.logo').attr({
    src: 'logo.png',
    alt: 'Логотип компании'
});

Особенность attr в Zepto заключается в том, что если метод вызывается без параметров, он возвращает объект всех атрибутов первого элемента коллекции:

var attributes = $('img.logo').attr();

Метод removeAttr используется для удаления атрибутов:

$('input[type="text"]').removeAttr('disabled');

Работа с CSS-свойствами

Для управления стилями применяется метод css. Он поддерживает как получение, так и установку стилей.

// Получение значения CSS-свойства
var color = $('p.text').css('color');

// Установка одного свойства
$('p.text').css('color', 'red');

// Установка нескольких свойств одновременно
$('div.container').css({
    width: '100%',
    height: '200px',
    backgroundColor: '#f0f0f0'
});

Метод css автоматически корректно обрабатывает единицы измерения для числовых значений, например, если передать число, Zepto добавит ‘px’ там, где это необходимо.

Работа с классами

Для управления классами элементов используются методы addClass, removeClass, toggleClass и hasClass.

// Добавление класса
$('div.box').addClass('active');

// Удаление класса
$('div.box').removeClass('active');

// Переключение класса
$('div.box').toggleClass('active');

// Проверка наличия класса
var has = $('div.box').hasClass('active'); // true или false

Методы поддерживают передачу нескольких классов через пробел:

$('div.box').addClass('highlighted selected');

Работа со значениями форм

Метод val позволяет получать и устанавливать значения элементов формы: <input>, <textarea>, <select>.

// Получение значения
var username = $('input#username').val();

// Установка значения
$('input#username').val('admin');

// Для select можно задать выбранный вариант
$('select#options').val('option2');

При работе с несколькими элементами метод val возвращает значение первого элемента коллекции.

Манипуляция текстом и HTML-контентом

Для работы с содержимым элементов используются методы text и html.

// Получение текстового содержимого
var content = $('p.description').text();

// Установка текстового содержимого
$('p.description').text('Новый текст');

// Получение HTML-контента
var htmlContent = $('div.container').html();

// Установка HTML-контента
$('div.container').html('<span>Текст с разметкой</span>');

Методы text и html автоматически обходят коллекцию элементов и применяют изменения ко всем выбранным элементам.

Управление размерами элементов

Методы width, height, innerWidth, innerHeight, outerWidth и outerHeight позволяют работать с размерами элементов.

// Получение ширины и высоты
var w = $('div.box').width();
var h = $('div.box').height();

// Установка ширины и высоты
$('div.box').width(300).height(150);

// Внутренние размеры с padding
var innerW = $('div.box').innerWidth();

// Внешние размеры с padding и border
var outerW = $('div.box').outerWidth(true); // true учитывает margin

Свойства, связанные с видимостью

Методы show, hide и toggle обеспечивают простое управление видимостью элементов.

// Скрыть элемент
$('div.panel').hide();

// Показать элемент
$('div.panel').show();

// Переключить видимость
$('div.panel').toggle();

Zepto использует свойство display для управления видимостью, сохраняя исходное значение display для корректного восстановления при show.

Специальные свойства

Некоторые методы позволяют управлять свойствами, не связанными напрямую с атрибутами HTML, например, prop:

// Установка свойства checked для checkbox
$('input[type="checkbox"]').prop('checked', true);

// Получение значения свойства
var isChecked = $('input[type="checkbox"]').prop('checked');

Метод prop отличается от attr тем, что работает с “живыми” свойствами элемента, а не с атрибутами, которые были заданы в HTML.

Итоговое взаимодействие

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

$('div.box')
    .addClass('highlighted')
    .css({color: 'blue', fontSize: '16px'})
    .attr('data-state', 'active')
    .show();

Такой подход обеспечивает высокую читаемость кода и экономию времени при работе с DOM-элементами, сохраняя при этом компактность библиотеки.

Оглавление