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

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

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

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

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

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

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

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

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

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

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

Наш HTML:

CSS:

Здесь некоторая информация о 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.

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии запрещены.