Изменение CSS свойств с помощью JavaScript

Данная статья пригодится новичкам в веб-программировании. Буду подразумевать, что вам знаком «СИшный» синтаксис, который лежит в основе JavaScript, и получение ссылки на элемент — метод getElementById и сопутствующие — проблем не вызывает. Естественно, основы HTML и CSS вам также должны быть известны.

Изменение CSS свойств посредством JavaScript

Для доступа к стилям существует специальное свойство объекта — style. Пусть на странице определён элемент с идентификатором elem:

Тогда, для доступа к его «стилевым» свойствам, можно использовать такой код (не пытайтесь использовать, вырвано из контекста!):

где ЦС — то свойство, к которому нужно обратиться или изменить.

Далее начинается пусть небольшая, но магия. Вам известны различные CSS свойства: background , border , display , font-size и т. п. Обратите внимание на последнее, в котором есть символ — (минус на клавиатуре). В названиях переменных такие дефисы использовать нельзя, поскольку в контексте программы они интерпретируются как знак вычитания. Для логического обоснования, маленький пример:

Если бы интерпретатор JavaScript допускал в именах символ минус, ему пришлось бы выполнить дополнительные действия:

Проверить существование переменной font-size .
Если её нет, попытаться выполнить арифметическое действие «вычитание» значения size из font .

Поэтому, имена свойств требуется «причесать» (нормализовать) для использования в коде. К счастью, определено всего 2 простых правила:

Если знака минус нет (margin, border, width и прочее) — записывается как есть:
Если знак минус присутствует, то он убирается, а следующая буква переводится в верхний регистр: background-color → backgroundСolor, z-index → zIndex и т. д.:

Вот так! Всё очень просто. Если вы знаете CSS свойства, значит, имеете возможность свободно ими рулить и в JavaScript. А попрактиковаться можете уже сейчас.

Ниже дан небольшой пример изменения свойств элемента с помощью JS. Если видете в названии слово color, это подразумевает задание цвета.

Думаю, нет нужды объяснять, что присвоение неверных значений игронируется?

Попробуйте управлять этим списком.
Сделать это совсем просто.
Можете выбрать свойство color.
Установите для него значение #0000dd

Выберите CSS-свойство и укажите корректное значение для него:

Свежим хлебушком типа батон —>
днём интернета
шоколадкой для работы мозга
коробочкой ароматного чая для бодрости продлением домена —>
продлением хостинга на +1 месяц

Доступ к CSS-переменным и их изменение с помощью Javascript

Светлана Павлова

И преимущество перед SASS-переменными

SASS-переменные с нами уже давно. Они позволяют задать переменную один раз во время выполнения (runtime) и использовать ее в нескольких местах. Уровень крутости — 3. Хотите уровень 6? Читайте дальше.

Взаимодействие с CSS-переменными при помощи JS после выполнения (post-runtime)

Создадим простую форму, которая будет использовать JS для динамического обновления CSS-переменных (в нашем случае, для изменения свойств color и margin у точки).

Давайте рассмотрим детально.

О CSS-псевдоклассе :root можно прочесть на MDN и W3Schools (англ. яз.) Цитата с MDN:

CSS-псевдокласс :root находит корневой элемент дерева документа. Применимо к HTML, :root находит элемент <html> и идентичен селектору по тегу html, но его специфичность выше.

Мы определили CSS-переменные в селекторе :root . В строках 11-12 видно их использование. По стандарту CSS, переменная задается и используется с помощью префикса «—» .

Обратим внимание на атрибуты ползунка — элемента формы input с type=”range” . Они содержат минимальное ( min ) и максимальное ( max ) значения, а также исходное значение для value . Также посмотрим на поле выбора цвета — элемент формы input с type=”color” . Для него исходный цвет задан атрибутом value=»#2cba92″ .

Javascript

1 — получили элемент footer ,

2 — получили коллекцию NodeList со всеми элементами input на странице,

4 — добавили метод EventListener для события CHANGE,

5 — добавили метод EventListener для события MOUSEMOVE (обновляет динамический отступ у ползунка),

7 — функция для установки значения нужной CSS-переменной (обратим внимание, что мы добавили “ px ” к переменной с отступом margin в строке 11).

Вот и всё про доступ к CSS-переменным и их изменение с помощью Javascript. Делитесь своим мнением, задавайте вопросы и, пожалуйста, читайте нас в Твиттере.

Как изменять параметры целого класса css-стиля через JS?

Думаю вопрос понятен из темы, приведу пример:
<style>
.ico <
position:absolute;
top:10px;
left:10px;
background-color:red;
border:1 inset;
>
</style>
<script>
function a() <
//здесь мне надо поменять стиль всего класса ico
>
</script>
<body>
<div onclick=»a()»></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</body>

Вот пример, так что, кто знает помогите, если конечно такое вообще возможно))

18 ответов

[QUOTE=alekciy]Через DOM можно много чего сделать. И имя класса вычислить, а даже сколько в данный момент и для каких элементов и сколько загружено свойств и при желании переназначить их.
И нормальный браузеры подобные Opera или FireFox позволяют так делатьно, но не гребаный IE.[/QUOTE]

Мне так-то под IE и нужно =)
Ну и получается, что решить проблему обращения к классу по имени через JS в IE нельзя?!

[QUOTE=alekciy]По сабжу темы я уже ответил, как для всех нормальных браузерах, так и для ослика.[/QUOTE]

Ты постоянно пытаешься меня подловить, что я не пробую то, о чём мне говорят, а сужу по представлениям 🙁 , так вот ещё раз повторю, то что ты мне уже написал НЕ РАБОТАЕТ и вопрос остался открытым.

[QUOTE=Leviafan]то что ты мне уже написал НЕ РАБОТАЕТ и вопрос остался открытым.

А теперь попробуй пощёлкать по диву и скажи мне, в чём я опять тебя не понял. [/QUOTE]
ЭТО РАБОТАЕТ!

Ты сказал, что у тебя стили во внешней CSS я тебе и напил код. Если бы сказал, что у тебя таблица стилей как втроеная, так и внешняя, и нужно изменять свойства во внетреней, я бы тебе написал для этого варианта код.

Потому как нужно понимать, что styleSheets[n] содержить все таблицы стилей для данного документа. Первая таблица в данном случае это подключеная, вторая (индекс 1) это втроеная. Если написать:

Изменить CSS свойство "background-img" через JS

Загрузка картинка в img (через input type="file")
У меня на странице есть ссылка <a href="javascript:showFrm()">Загрузить. </a> и скритый тэг.

Вывод текста через css свойство "content"
Ребят, прошу помощи. Не пойму, почему время от время случается такой глюк: вместо "итого".

Как изменить свойство background у Page через код VB
Всем привет! Появилась необходимость изменить фоновый рисунок page, но как через код VB сделать я.

Изменить background через CSS
Подскажите что делать пытаюсь изменить backgrounda через css но ничего не получается пробовал.

Как изменить css через js