Inline-стили через $.style()

Библиотека Bliss.js предоставляет удобный и лаконичный способ работы с DOM-элементами. Метод $.style() позволяет напрямую управлять inline-стилями элементов, обеспечивая простоту и гибкость в изменении внешнего вида без необходимости написания громоздких цепочек element.style.property = value.

Основные возможности

Метод $.style() может использоваться для:

  1. Чтения текущего значения стиля.
  2. Присвоения одного или нескольких стилей одновременно.
  3. Удаления конкретного стиля.

Синтаксис метода:

element.style(property, value);
element.style({ property1: value1, property2: value2 });
element.style(property); // для чтения
element.style(property, ''); // для удаления

Присвоение одного стиля

Прямое назначение свойства выполняется очень просто. Первый аргумент — название CSS-свойства в camelCase, второй — значение.

var box = $('#box');

box.style('backgroundColor', 'red');
box.style('width', '200px');
box.style('height', '100px');

В примере свойство background-color задаётся через backgroundColor в camelCase, а размер задаётся в пикселях. Это обеспечивает корректное сопоставление с DOM API.

Присвоение нескольких стилей

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

box.style({
    backgroundColor: 'blue',
    border: '2px solid black',
    borderRadius: '10px',
    padding: '20px'
});

Использование объекта повышает читаемость кода и позволяет централизованно управлять стилями.

Чтение значения стиля

Для получения текущего inline-значения свойства достаточно вызвать метод с одним аргументом:

var bgColor = box.style('backgroundColor');
console.log(bgColor); // "blue"

Важно понимать, что метод возвращает только inline-стиль, заданный через style="". Стили из CSS-файлов или computed styles возвращены не будут.

Удаление стиля

Удалить inline-стиль можно, установив значение свойства в пустую строку:

box.style('border', '');

После этого свойство исчезнет из атрибута style и элемент будет наследовать стиль из CSS-файлов или других источников.

Поддержка кастомных свойств (CSS Variables)

Bliss.js позволяет работать и с CSS-переменными через -- синтаксис:

box.style('--main-color', '#ff6600');

Это создаёт или обновляет CSS-переменную для конкретного элемента, которую можно использовать в стилях через var(--main-color).

Динамическое вычисление значений

Метод $.style() принимает не только строку, но и функцию для динамического расчёта значения:

box.style('width', function(el, i) {
    return (i + 1) * 50 + 'px';
});

Функция получает два аргумента: элемент и индекс (если применяется к коллекции). Это особенно удобно при работе с группами элементов для плавного распределения стилей.

Работа с коллекциями элементов

Если метод вызывается на наборе элементов, Bliss.js применяет стили ко всем сразу:

$$('.item').style({
    margin: '10px',
    padding: '5px'
});

Каждый элемент получит одинаковые inline-стили без необходимости использования циклов.

Важные особенности

  • Свойства задаются в camelCase, например backgroundColor, fontSize.
  • Метод работает только с inline-стилями; computed styles для чтения доступны через getComputedStyle.
  • Поддерживаются функции и объекты для динамических и множественных изменений.
  • Совместим с коллекциями элементов через $$().

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

  1. Изменение цвета при наведении:
var button = $('#btn');
button.on('mouseover', function() {
    this.style('backgroundColor', 'green');
});
button.on('mouseout', function() {
    this.style('backgroundColor', '');
});
  1. Анимация через шаги изменения стиля:
var box = $('#box');
var width = 100;

var interval = setInterval(function() {
    width += 10;
    box.style('width', width + 'px');
    if (width >= 300) clearInterval(interval);
}, 100);
  1. Применение стилей к группе элементов с разной динамикой:
$$('.item').style(function(el, i) {
    return {
        marginLeft: (i * 20) + 'px',
        opacity: 1 - i * 0.1
    };
});

Метод $.style() позволяет создать чистый и лаконичный код при работе с DOM, заменяя громоздкие конструкции element.style.property = value и повышая читаемость проекта.

Оглавление