Как добавить стиль background color для найденного элемента js

Стили и классы

До того, как начнёте изучать способы работы со стилями и классами в JavaScript, есть одно важное правило. Надеемся, это достаточно очевидно, но мы всё равно должны об этом упомянуть.

Как правило, существует два способа задания стилей для элемента:

1. Создать класс в CSS и использовать его: <div >
2. Писать стили непосредственно в атрибуте style : <div style=". "> .

JavaScript может менять и классы, и свойство style .

Классы – всегда предпочтительный вариант по сравнению со style . Мы должны манипулировать свойством style только в том случае, если классы «не могут справиться».

Например, использование style является приемлемым, если мы вычисляем координаты элемента динамически и хотим установить их из JavaScript:

В других случаях, например, чтобы сделать текст красным, добавить значок фона – описываем это в CSS и добавляем класс (JavaScript может это сделать). Это более гибкое и лёгкое в поддержке решение.

className и classList

Изменение класса является одним из наиболее часто используемых действий в скриптах.

Когда-то давно в JavaScript существовало ограничение: зарезервированное слово типа "class" не могло быть свойством объекта. Это ограничение сейчас отсутствует, но в то время было невозможно иметь свойство elem.class .

Поэтому для классов было введено схожее свойство "className" : elem.className соответствует атрибуту "class" .

Если мы присваиваем что-то elem.className , то это заменяет всю строку с классами. Иногда это то, что нам нужно, но часто мы хотим добавить/удалить один класс.

Для этого есть другое свойство: elem.classList .

elem.classList – это специальный объект с методами для добавления/удаления одного класса.

Так что мы можем работать как со строкой полного класса, используя className , так и с отдельными классами, используя classList . Выбираем тот вариант, который нам удобнее.

• elem.classList.add/remove("class") – добавить/удалить класс.
• elem.classList.toggle("class") – добавить класс, если его нет, иначе удалить.
• elem.classList.contains("class") – проверка наличия класса, возвращает true/false .

Кроме того, classList является перебираемым, поэтому можно перечислить все классы при помощи for..of :

Element style

Свойство elem.style – это объект, который соответствует тому, что написано в атрибуте "style" . Установка стиля elem.style.width="100px" работает так же, как наличие в атрибуте style строки width:100px .

Для свойства из нескольких слов используется camelCase:

Стили с браузерным префиксом, например, -moz-border-radius , -webkit-border-radius преобразуются по тому же принципу: дефис означает заглавную букву.

Сброс стилей

Иногда нам нужно добавить свойство стиля, а потом, позже, убрать его.

Например, чтобы скрыть элемент, мы можем задать elem.style.display = "none" .

Затем мы можем удалить свойство style.display , чтобы вернуться к первоначальному состоянию. Вместо delete elem.style.display мы должны присвоить ему пустую строку: elem.style.display = "" .

Если мы установим в style.display пустую строку, то браузер применит CSS-классы и встроенные стили, как если бы такого свойства style.display вообще не было.

Обычно мы используем style.* для присвоения индивидуальных свойств стиля. Нельзя установить список стилей как, например, div.style="color: red; width: 100px" , потому что div.style – это объект, и он доступен только для чтения.

Для задания нескольких стилей в одной строке используется специальное свойство style.cssText :

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

То же самое можно сделать установкой атрибута: div.setAttribute(‘style’, ‘color: red. ‘) .

Следите за единицами измерения

Не забудьте добавить к значениям единицы измерения.

Например, мы должны устанавливать 10px , а не просто 10 в свойство elem.style.top . Иначе это не сработает:

Пожалуйста, обратите внимание, браузер «распаковывает» свойство style.margin в последних строках и выводит style.marginLeft и style.marginTop из него.

Вычисленные стили: getComputedStyle

Итак, изменить стиль очень просто. Но как его прочитать?

Например, мы хотим знать размер, отступы, цвет элемента. Как это сделать?

Свойство style оперирует только значением атрибута "style" , без учёта CSS-каскада.

Поэтому, используя elem.style , мы не можем прочитать ничего, что приходит из классов CSS.

Например, здесь style не может видеть отступы:

…Но что, если нам нужно, скажем, увеличить отступ на 20px ? Для начала нужно его текущее значение получить.

Для этого есть метод: getComputedStyle .

Результат вызова – объект со стилями, похожий на elem.style , но с учётом всех CSS-классов.

Есть две концепции в CSS:

1. Вычисленное (computed) значение – это то, которое получено после применения всех CSS-правил и CSS-наследования. Например, height:1em или font-size:125% .
2. Окончательное (resolved) значение – непосредственно применяемое к элементу. Значения 1em или 125% являются относительными. Браузер берёт вычисленное значение и делает все единицы измерения фиксированными и абсолютными, например, height:20px или font-size:16px . Для геометрических свойств разрешённые значения могут иметь плавающую точку, например, width:50.5px .

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

Так что, в настоящее время getComputedStyle фактически возвращает окончательное значение свойства, для геометрии оно обычно в пикселях.

Для правильного получения значения нужно указать точное свойство. Например: paddingLeft , marginTop , borderTopWidth . При обращении к сокращённому: padding , margin , border – правильный результат не гарантируется.

Например, если есть свойства paddingLeft/paddingTop , то что мы получим вызывая getComputedStyle(elem).padding ? Ничего, или, может быть, «сгенерированное» значение из известных внутренних отступов? Стандарта для этого нет.

Посещённые ссылки могут быть окрашены с помощью псевдокласса :visited .

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

JavaScript не видит стили, применяемые с помощью :visited . Кроме того, в CSS есть ограничение, которое запрещает в целях безопасности применять к :visited CSS-стили, изменяющие геометрию элемента. Это гарантирует, что нет обходного пути для «злой» страницы проверить, была ли ссылка посещена и, следовательно, нарушить конфиденциальность.

Итого

Для управления классами существуют два DOM-свойства:

• className – строковое значение, удобно для управления всем набором классов.
• classList – объект с методами add/remove/toggle/contains , удобно для управления отдельными классами.

Чтобы изменить стили:

Свойство style является объектом со стилями в формате camelCase. Чтение и запись в него работают так же, как изменение соответствующих свойств в атрибуте "style" . Чтобы узнать, как добавить в него important и делать некоторые другие редкие вещи – смотрите документацию.

Свойство style.cssText соответствует всему атрибуту "style" , полной строке стилей.

Для чтения окончательных стилей (с учётом всех классов, после применения CSS и вычисления окончательных значений) используется:

• Метод getComputedStyle(elem, [pseudo]) возвращает объект, похожий по формату на style . Только для чтения.

Задачи

Создать уведомление

Напишите функцию showNotification(options) , которая создаёт уведомление: <div > с заданным содержимым. Уведомление должно автоматически исчезнуть через 1,5 секунды.

Пример объекта options :

Используйте CSS-позиционирование для отображения элемента в заданных координатах. Исходный документ имеет необходимые стили.

Управление классами и стилями элементов в JavaScript

В этой статье мы рассмотрим различные методы для работы с классами и стилями элемента. Познакомимся со свойствами classList и style, и примерами их использования для управления соответственно классами и стилями элементов на странице.

Управление классом (классами) элемента

Первый способ взаимодействия с классами элементов сводится к использованию DOM-свойства className . Данное свойство является отражением атрибута class в DOM. DOM-свойство className не было названо class из-за того, что раньше в JavaScript зарезервированные слова нельзя было использовать в качестве названия свойств объектов. Если вы не знаете, что такое DOM-свойства и чем они отличаются от атрибутов, то прочитать про это можете в этой статье.

Пример, в котором выполним различные операции над классом элемента используя DOM-свойство className :

Второй способ выполнить операции, связанные с классом элемента – это использовать методы для управления атрибутами.

Пример, в котором выполним действия как вышеприведённом коде, но с использованием методов для управления атрибутами:

DOM-свойство className и атрибут class всегда синхронизуются между собой, это значит, что при изменении одного меняется и другое.

Но у элемента может быть не один класс, а несколько. В этом случае работать с ними как со строкой не очень удобно.

Например, определить наличие какого-то одного определённого класса у элемента, используя вышеприведённые способы уже нельзя осуществить так просто. Это потребует написание определённого кода.

Пример, в котором проверим наличие у элемента класса content__show :

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

Свойство classList

Свойство classList представляет собой специальный объект (DOMTokenList), который содержит методы для выполнения различных операций над классами элемента.

• .add( className1[,className2. ] ) — добавляет один или несколько указанных классов к элементу. Если у элемента уже есть данный класс, то он к нему добавлен не будет.
• .remove( className1[,className2. ] ) — удаляет один или несколько указанных классов у элемента. Если у элемента нет класса, который вы хотите удалить, то никаких действий произведено не будет.
• .contains( className ) – проверяет наличие класса у элемента; в качестве ответа возвращает true или false .
• .toggle( className [,flag] ) — переключает указанное имя класса у элемента, т.е. если у элемента есть данный класс, то убирает его; в противном случае добавляет. Второй параметр ( flag ) необязательный. По умолчанию он имеет значение undefined . Если ему установить значение true или false , то он будет работать как метод add или remove , т.е. либо добавлять класс к элементу, либо удалять его у него.

Пример, в котором показано как можно выполнять различные действия, связанные с классами элемента с использованием методов classList :

Объект classList является псевдомассивом, т.е. его можно перебрать как массив.

Пример, в котором переберём все классы classList :

Свойство classList поддерживается всеми современными браузерами. Если нужна поддержка совсем старых браузеров (например, Internet Explorer 8, 9), то в этом случае можно воспользоваться каким-нибудь полифиллом.

Стили элемента

В DOM у каждого элемента есть свойство style , с помощью которого мы можем управлять его стилями. Значение данного свойства — это объект, который доступен только для чтения. Установка стилей элементу в этом случае осуществляется посредством добавления к нему соответствующих свойств.

Пример, как можно к элементу добавить стили через DOM-свойство style :

Имена свойств объекта style обычно совпадают с названиями CSS-свойств. Исключение составляют только те CSS-свойства, в которых используется дефис. Например, background-color . В этом случае дефис и следующая за ним буква заменяется на прописную. Например, CSS-свойство background-color для объекта style будет указывать как backgroundColor . А, например, CSS-свойство с браузерным префиксом -webkit-border-radius — как WebkitBorderRadius .

Удаление стилей

Например, установим body некоторый цвет фона:

Если теперь данный стиль нужно убрать, то чтобы это выполнить мы должны просто присвоить ему пустую строку:

Примеры использования DOM-свойства style для установки стилей элементам.

Свойство cssText

Кроме индивидуального установления стилей элементу мы можем установить их сразу с помощью специального свойства style.cssText . Осуществляется это посредством присваивания этому свойству строки, состоящей из набора стилей, разделённых между собой с помощью точки с запятой. Т.е. выполняется это аналогично тому, как мы устанавливаем стили в HTML-атрибуте style .

Пример, в котором установим стили «font-size:40px; color:blue;» элементам с классом intro :

При установке стилей с помощью свойства style.cssText нужно быть осторожным. Эти связано с тем, что при установке это свойство удаляет все стили, которые есть у элемента. Т.е. те, которые мы установили ему с помощью атрибута style и в соответствующем ему DOM-свойстве.

Выполнить операцию, аналогичную той которую выполняет свойство style.cssText , можно ещё через метод setAttribute .

Задания

1. Написать скрипт, используя classList , для установления элементу с классом text трех классов: size-40 , color-red и bg-yellow :

2. Написать код для установления стиля «width: 180px; height: 180px;» всем элементам на странице с классом, начинающимся со слов block- .

How to set background color of HTML element using css properties in JavaScript

How can I set the background color of an HTML element using css in JavaScript?

17 Answers 17

In general, CSS properties are converted to JavaScript by making them camelCase without any dashes. So background-color becomes backgroundColor .

You might find your code is more maintainable if you keep all your styles, etc. in CSS and just set / unset class names in JavaScript.

Your CSS would obviously be something like:

Then in JavaScript:

Or, using a little jQuery:

Add this script element to your body element:

You can try this

You can do it with JQuery:

so many ways are there I think it is very easy and simple

By using jquery we can target the element’s class or Id to apply css background or any other stylings

Changing CSS of a HTMLElement

You can change most of the CSS properties with JavaScript, use this statement:

where <selector> , <property> , <new style> are all String objects.

Usually, the style property will have the same name as the actual name used in CSS. But whenever there is more that one word, it will be camel case: for example background-color is changed with backgroundColor .

The following statement will set the background of #container to the color red:

Here’s a quick demo changing the color of the box every 0.5s:

Changing CSS of multiple HTMLElement

Imagine you would like to apply CSS styles to more than one element, for example, make the background color of all elements with the class name box lightgreen . Then you can:

select the elements with .querySelectorAll and unwrap them in an object Array with the destructuring syntax:

loop over the array with .forEach and apply the change to each element:

Here is the demo:

Another method

If you want to change multiple style properties of an element more than once you may consider using another method: link this element to another class instead.

Assuming you can prepare the styles beforehand in CSS you can toggle classes by accessing the classList of the element and calling the toggle function:

Как работать со стилями в Javascript

Javascript не только предназначен для создания функциональности на странице. Благодаря наличию Documnt Object Model (DOM) и Browser Object Model (BOM), язык может взаимодействовать с разметкой, стилями и браузером. DOM является древовидной структурой, основой которой является объект Window.

Элементы HTML разметки представляются в DOM как набор объектов в определенной иерархии. Каждый HTML элемент представлен в виде объекта со своими свойствами и методами. Поэтому, посредством JS, можно обращаться к элементам разметки и манипулировать с их свойствами.

Свойства HTML элементов выражены в CSS стилях. Однако JS не может изменять стили, заключенные в теге <style>, а также во внешних файлах CSS. Когда посредством JS изменяется или добавляется новое свойство CSS для элемента, то интерпретатор формирует его как атрибут «style». Это можно наглядно увидеть в инструментах разработчика Chrome или в Firebug браузера Firefox.

Иерархия DOM

Объекты в иерархии DOM распределены в следующей последовательности:

1. Window;
2. Document;
3. Element;

Теперь подробнее о каждом из них:

1. Window. Это главный объект всего браузера. Он содержит свойства-объекты управления окном и элементами разметки. Одним из его свойств-объектов управления экраном браузера является Document, который содержит в себе свойство-объект Element.
2. Document. Управляет всеми элементами разметки он содержит в себе необходимый набор свойств для обращения к элементам HTML, а также свойства для управления окном.
3. Element. Содержит свойства и методы, которые позволяют манипулировать элементами и стилями.

Поиск нужного элемента

Прежде чем присвоить элементу какой-либо стиль, нужно сначала обратиться к объекту этого элемента, через объект Document. Выглядит это следующим образом: Document.Element(метод обращения к элементу).style.property = value

Подробнее об этой конструкции:

1. Document — обращаемся к объекту страницы;
2. Element — полученный HTML-элемент в ходе вызова одного из методов Document.
3. style — объект, содержащий свойства CSS объекта Element.
4. property — CSS свойство, а также свойство объекта style.
5. value — значение CSS свойства, которое может быть как числовым, так и строковым.

Аналогичным способом мы можем прочитать значение любого CSS свойства. Однако это возможно только в том случае, если у элемента стоит атрибут style. Рассмотрим на примере обращение к элементу посредством метода «getElementById(name)»

Пример:

<p >

var p = document.getElementById(«paragraph»); // сохранили в переменную элемент с > p.style.fontSize = «3em»; // изменим стиль параграфа, увеличив его шрифт до 3em

Если открыть инструменты разработчика в браузере, параграф будет с атрибутом style: <p style = «font-size: 3em»>Параграф<\p>

Методы поиска элемента

Есть несколько методов объекта document для поиска определенного элемента по классу, по айди или имени тега:

• getElementById(id) — поиск элемента по id, возвращается один элемент с соответствующим айди;
• getElementsByClassName(class) — возвращает список элементов под указанным классом, обращение к любому из них осуществляется по индексу [index];
• getElementsByTagName(tag) — метод аналогичен предыдущему, только поиск осуществляется по имени тега;
• getElementsByName(name) — возвращает список элементов с указанным именем в атрибуте;
• querySelector(selector) — возвращает первый элемент с указанным в параметре селектором из тега style или внешнего файла CSS;
• querySelectorAll(selector) — метод аналогичен предыдущему, но возвращает не один элемент, а их список;
• body — обращение к тегу body;
• forms — обращение к формам, сохраняется список имеющихся форм, к отдельной можно обратиться по индексу;
• images — возвращает все имеющиеся изображения на страницы в теге img, обращение к отдельному осуществляется по индексу.

Пример:

<p > <form>
<input type = «text»>
<input type = «submit»>
</form>
<img src = «cat.jpg»>

// Получаем объекты этих элементов
var p = document.getElementById(«paragraph»); // получаем параграф по айди
var f = document.forms; // получили список форм, состоящий из одной
var i = document.images; // получение всех изображений

//Добавим полученным элементам стили
p.style.backgroundColor = «red»;
f.style.borderRadius = «20px»;
i.style.float = «left»;
i.style.margin = «50px»;

Отличия имен свойств в CSS и JavaScript

В CSS имена свойств пишутся через дефис, к примеру: font-size, background-image, border-width и другие. Сейчас рассматриваются именно те свойства, которые пишутся через дефис. В JavaScript свойства пишутся слитно, но с большой буквы: fontSize, backgroundImage, borderWidth. Данное правило не относится к свойствам CSS, состоящим из одного слова: width, position, margun и другие указываются в JavaScript с тем-же синтаксисом.

Как изменить свойства элемента через тег style или внешний файл

Представим, что у нас есть внешний CSS файл со свойствами для тегов определенного класса:

.paragraph <
font-size: 20px;
background-color: yellow;
border: 1px solid black;
>

Теперь в том-же файле определим стиль, для несуществующего элемента:

В HTML у нас есть элемент для которого были написаны эти стили:

Чтобы определить параграфу стили из внешнего файла, нужно сменить имя его класса. Мы определили стили для несуществующего класса. Его мы и поставим нашему параграфу:

var p = document.getElementById(«paragraph»); // Сохранили объект параграфа в переменную
p.class = «changeParagraph»; // Замена имени класса параграфа

Теперь наш параграф получил новый класс «chageParagraph». Как видно для данного класса определены лишь стили по увеличению размера шрифта. Соответственно, фоновый цвет стал по умолчанию, и рамка исчезла. Вернуть обратно прежний стиль можно прежним образом, через установку старого имени класса. Такой подход часто применяют в событиях при добавлении интерактивности странице.

Свойства и методы которые позволяют изменять классы и id элементов

Рассмотрим несколько полезных свойств и методов, которые удобно применять для значения атрибутов class и id:

1. id = value — сменяет значение id;
2. className = value — возвращает или устанавливает новое имя атрибута class;
3. class = value — аналогично предыдущему;
4. setAttribute(name, value) — метод позволяет установить класс или айди элементу, а также сменить значение имеющегося;

Другие примеры установки различных стилей

Рассмотрим несколько примеров для установки стилей для различных элементов через JavaScript:

• object.style.animation = «name duration timingFunction delay iterationCount direction fillMode playState» создание анимации для объекта.
• object.style.background = «color image repeat attachment position size origin clip» — установка свойств для фона.
• object.style.border = «width style color» — установка стилей для границ элемента.
• object.style.columns = «auto|column-width column-count» — установка свойств для колонок.
• object.style.font = «font-style font-variant font-weight font-size/line-height — короткий способ установки нужных свойств для шрифта.
• object.style.opacity — добавление элементу прозрачности.
• object.style.outline = «width style color» — установка внешней границы для элемента.

Объект classList

ClassList хранит объект всех классов определенных элементов. Он обладает своими методами и свойствами для манипуляций с классами. Рассмотрим несколько примеров:

• document.getElementById(«myDIV»).classList — получение объекта classList, который является списком классов с айди myDiv.
• document.getElementById(«myDIV»).classList.add(«mystyle», «anotherClass», «thirdClass») — здесь определенному элементу было установлено три класса с именами, указанными в параметрах.
• document.getElementById(«myDIV»).classList.remove(«mystyle») — здесь элементу удалили класс с именем, указанным в параметре метода remove.
• document.getElementById(«myDIV»).classList.remove(«mystyle», «anotherClass», «thirdClass») — аналогично предыдущему примеру, однако здесь удаляется сразу несколько классов.
• document.getElementById(«myDIV»).classList.length — получение длины списка классов.
• document.getElementById(«myDIV»).classList.item(0) — получения первого элемента с классом из списка.
• document.getElementById(«myDIV»).classList.contains(«mystyle») — проверяем, есть ли такой класс.
• document.getElementById(«myDropdown»).classList.toggle(«show») — установка атрибута класса и его значения.

Другие примеры

Пример 1: Добавление надписи посредством нажатия на кнопку

<p the button to change the text in this paragraph.</p>

<button onclick=»myFunction()»>Try it</button>

<script>
function myFunction() <
document.getElementById(«demo»).innerHTML = «Hello World»;
>
</script>

Пример 2: Смена цвета текста параграфа

<p the button to change the color of this paragraph.</p>

<button onclick=»myFunction()»>Try it</button>

<script>
function myFunction() <
var x = document.getElementById(«demo»);
x.style.color = «red»;
>
</script>

Пример 3: Смена фонового цвета среднего параграфа

<div > <p>P element in first div with Div’s index is 0.</p>
</div>

<div color»>
<p>P element in first div with color». Div’s index is 0.</p>
</div>

<div color»>
<p>P element in second div with color». Div’s index is 1.</p>
</div>

<p>Click the button to change the background color of the first div element with the classes «example» and «color».</p>

<button onclick=»myFunction()»>Try it</button>

<script>
function myFunction() <
var x = document.getElementsByClassName(«example color»);
x[0].style.backgroundColor = «red»;
>
</script>

Пример 4: Смена фона для всех элементов списка

<p>This is a p element</p>

<p>This is also a p element.</p>

<p>This is also a p element — Click the button to change the background color of all p elements in this document.</p>

<button onclick=»myFunction()»>Try it</button>

<script>
function myFunction() <
var x = document.getElementsByTagName(«P»);
var i;
for (i = 0; i < x.length; i++) <
x[i].style.backgroundColor = «red»;
>
>
</script>

Пример 5: Получение всех параметров документа

<p>An unordered list:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<p>Click the button to display the innerHTML of the UL element (index 3).</p>

<button onclick=»myFunction()»>Try it</button>

<p >

<script>
function myFunction() <
var x = document.getElementsByTagName(«*»);
document.getElementById(«demo»).innerHTML = x[3].innerHTML;
>
</script>

Обратите внимание, здесь все элементы помещены в список через параметр «*». Обращение к любому из них также осуществляется через индекс.

Итого

Современный JavaScript не является удобным инструментом для манипуляций со стилями. доя этого есть ряд других инструментов, к примеру JQuery. Однако каждый разработчик должен знать как управлять стилями нативным языком.