Цитата: Милкимаус от 23.05.2026, 14:41

CSS на JavaScript : стилизация в JS

CSS на JavaScript : стилизация в JS. Свойства CSS можно задать непосредственно кодом JS. Это на первый взгляд может быть необычно, но зато более удобно и быстро. Применение стилей в JS , стилизация JS

Каскадные таблицы стилей (Cascading Style Sheets - CSS) - это стандарт визуального представления HTML-документов. Каскадные таблицы стилей предназначены для использования дизайнерами: они позволяют точно определить шрифты, цвета, величину полей, выравнивание, параметры рамок и даже координаты элементов в документе.

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

Ниже приведена DEMO версия исполнения кода:

Стилизация JS

Самый простой способ управления стилями CSS - это манипулирование атрибутом style отдельных элементов документа. Как и для большинства HTML-атрибутов, атрибуту style соответствует одноименное свойство объекта Element, и им можно манипулировать в сценариях на языке JavaScript. Однако свойство style имеет одну отличительную особенность: его значением является не строка, а объект CSS. Свойства этого объекта представляют CSS-свойства, определенные в HTML-атрибуте style.

Листинг кода

<div style="width: 400px; height: 400px"><div id="kvadrat" style="border: solid 1px; width: 200px; height: 200px;"><p>Этот квадрат</p><p>изменяет</p><p>свойства CSS</p><p>на JavaSript</p></div></div>
<input type="range" min="0" max="400" value="200" id="fader" step="1" onchange="outputUpdate(value)" onmousemove="outputUpdate(value)"><output id="width">50</output>
<input type="range" min="0" max="400" value="200" id="fader" step="1" onchange="outputUpdate2(value)" onmousemove="outputUpdate2(value)"><output id="height">50</output>

<script>
function outputUpdate(vol) {
let a = document.querySelector('#width').value = vol;
kvadrat.style.width = a+'px';
}
function outputUpdate2(vol) {
let b = document.querySelector('#height').value = vol;
kvadrat.style.height = b+'px';
}
</script>

В данном коде можно увидеть что в HTML объекте <range/> используются сразу два обработчика событий мыши: onchange и onmousemove. Таким образом JS код будет исполняться при изменении положения "ползунка" как при клике на него, так и при его изменении в режиме реального времени.

Это очень удобно для мобильных браузеров. Так как клик мыши (клик экрана) инициировать может не получиться с первого раза. Поскольку клик и касание экрана не совсем одно и тоже действие в разных браузерах. А вот движение ползунка использует одинаковый механизм как мобильных браузерах, так и в десктопных версиях.

Листинг кода для большей наглядности можно проверить на странице в РЕДАКТОРЕ HTML КОДА

Перейти на ГЛАВНУЮ СТРАНИЦУ