Главная » Статьи » Обмен данными между CSS и JavaScript

Обмен данными между CSS и JavaScript

От автора: одной из самых больших битв, которые мы наблюдаем в мире веб-разработки, все еще остается CSS против JavaScript. У обоих есть свои достоинства, собственный синтаксис и идеи, и их может быть сложно понять.

Вот почему мне нравится, что у нас есть способы совместить эти технологии и использовать каждую для того, в чем она лучше. Во-первых, меня всегда раздражало манипулирование объектом стилей элемента DOM. Это означало доступ к элементу и установку различных свойств стиля. В конце концов, это привело к появлению встроенного атрибута стиля, который вы никогда не написали бы вручную.

Для меня более понятный способ — использовать пользовательские свойства CSS. Их обычно называют CSS переменными, и вы определяете их в CSS с помощью синтаксиса —.

:root { --pagebackground: powderblue;
}
body { background: var(--pagebackground);
}

Так как это переменные, вы можете повторно использовать их в своем документе стилей. Самое интересное начинается, когда вы используете JavaScript для управления ими. В этом примере пользовательское свойство CSS устанавливается для корневого элемента документа. Итак, вы можете прочитать его с помощью JavaScript, используя следующее.

let bg = getComputedStyle(document.documentElement). getPropertyValue('--pagebackground');

И вы можете установить его с помощью JavaScript, получив доступ к стилю корневого элемента (или любого другого элемента с пользовательскими свойствами) и установив свойство.

Так как это переменные, вы можете повторно использовать их в своем документе стилей. Самое интересное начинается, когда вы используете JavaScript для управления ими. В этом примере пользовательское свойство CSS устанавливается для корневого элемента документа. Итак, вы можете прочитать его с помощью JavaScript, используя следующее.

document.documentElement.style.setProperty('--pagebackground', 'firebrick');

Вы можете попробовать это вживую на codepen:

Самое замечательное в этом то, что вы можете использовать возможности JavaScript, чтобы предоставить CSS то, к чему он не может получить доступ. Например, CSS не может прочитать координаты курсора мыши, а JavaScript может. В нашем CSS мы можем определить два свойства как 0:

:root { --mouse-x: 0; --mouse-y: 0;
}

А в JavaScript мы добавляем в документ обработчик mousemove и манипулируем этими двумя свойствами:

let root = document.documentElement
document.addEventListener('mousemove', e => { root.style.setProperty('--mouse-x', e.x); root.style.setProperty('--mouse-y', e.y);
});

И это все, что нам нужно. Поскольку пользовательские свойства CSS являются действующими и меняют свое значение, теперь мы можем, например, показать кружок, в котором находится курсор мыши в CSS, используя следующее.

Наш HTML:

<div id="ball"></div>

CSS:

:root { --mouse-x: 0; --mouse-y: 0;
}
#ball { width: 20px; height: 20px; background: white; border-radius: 100%; transform: translate( calc(calc(var(--mouse-x) - 10) * 1px), calc(calc(var(--mouse-y) - 10) * 1px) );
}

Здесь некоторая информация о CSS:

Мы устанавливаем ширину и высоту шара DIV равными 20 пикселей, а фон — белым.

Добавление границы-радиуса 100% гарантирует, что мы получим круг, а не квадрат.

Затем мы используем transform: translate, чтобы разместить круг на экране. Это может быть что-то вроде transform: translate (200px, 300px), чтобы расположить наш круг на 200 пикселей по горизонтали и 300 пикселей по вертикали.

Поскольку JavaScript устанавливает для пользовательского свойства CSS числовое значение, нам необходимо преобразовать его в пиксели, умножив на 1 пиксель.

А поскольку размер шара составляет 20 пикселей, мы не можем просто поместить его в точку mouse-x и mouse-y, а нам нужно вычесть из него 10, чтобы центрировать его на курсоре.

Этот трюк позволяет нам выполнять сложные вычисления, считывать состояние браузера и состояние взаимодействия в JavaScript и при этом сохранять внешний вид в CSS. Для меня это победа.

Если вы хотите увидеть это в действии, вы можете попробовать этот код. Я также добавил фоновый эффект, чтобы показать, как можно повторно использовать данные x и y мыши:

Автор: Christian Heilmann

Источник: christianheilmann.com

Редакция: Команда webformyself.