Установка нескольких стилей элемента HTML с помощью стандартного JavaScript часто требует нескольких строк кода.

Однако мы можем сделать все это с помощью одной строки кода, если поместим наши стили объектов в прокси-сервер JavaScript.

В этой статье мы рассмотрим, как мы можем обернуть наш объект элемента в прокси, чтобы установить несколько стилей.

Простая установка нескольких стилей, заключая наш элемент в прокси

Чтобы обернуть наш объект HTML-элемента в прокси, мы можем написать:

const styleProxy = {
  get: (object, property) => {
    return (value) => {
      if (value) {
        object[property] = value;
        return new Proxy(object, styleProxy);
      }
      return object[property];
    }
  }
}
const style = (selector) => {
  const element = document.querySelector(selector);
  return new Proxy(element.style, styleProxy);
}
style("div")
  .color("#fff")
  .backgroundColor("#000")
  .opacity("1");

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

Если мы передаем value, мы устанавливаем его как одно из значений свойства object.

Затем мы возвращаем прокси с object и styleProxy в качестве прокси.

В противном случае мы возвращаем объект.

Затем мы создаем style, который получает элемент с заданным селектором с querySelector и возвращает прокси со свойством объекта element.style и styleProxy.

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

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

Следовательно, мы можем написать следующее, чтобы установить стили:

style("div")
  .color("#fff")
  .backgroundColor("#000")
  .opacity("1");

Мы вызываем color, чтобы установить style.color.

Мы вызываем backgroundColor , чтобы установить style.backgroundColor.

И мы вызываем opacity, чтобы установить style.opacity.

Заключение

Мы можем установить несколько стилей в одной строке кода, создав прокси из выбранного объекта HTML-элемента.

В прокси у нас есть геттер, который возвращает функцию, которая возвращает новый прокси для установки других стилей.