Html body style javascript

Управление классами и стилями элементов в 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 :

// получим элемент c const sideBar = document.querySelector('#sidebar'); // переключим класс hidden-xs у элемента, т.е. если он есть он у элемента, то удалим его; а если данного класса нет, то добавим его к нему sideBar.classList.toogle('hidden-xs'); // добавим три дополнительных класса sideBar.classList.add('col-xs-6', 'col-sm-4', 'col-md-3'); // удалим класс hidden-xs sideBar.classList.remove('hidden-xs'); // проверим есть ли класс hidden-lg у элемента и если есть, то добавим к нему ещё один hidden-md if (sideBar.classList.contains('hidden-lg')) { sideBar.classList.add('hidden-md'); }

Объект 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 некоторый цвет фона:

document.body.style.backgroundColor = '#eee';

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

document.body.style.backgroundColor = '';

Примеры использования 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- .

Источник

Html body style javascript

Last updated: Jan 12, 2023
Reading time · 2 min

# Set styles on the Body Element using JavaScript

To set styles on the body element:

1. Use the document.body property to access the body element.
2. Set properties on the style object of the element to update its styles.
3. For example, document.body.style.backgroundColor = 'lime' .

Here is the HTML for the examples.

Copied! 
DOCTYPE html> html lang="en"> head> title>bobbyhadz.comtitle> meta charset="UTF-8" /> head> body> div id="box" style="background-color: salmon; width: 150px; height: 150px"> Hello world div> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
// ✅ set styles on the body element document.body.style.backgroundColor = 'lime'; document.body.style.color = 'white'; 

The document.body property represents the body element of the current document.

We used the style object to set CSS properties on the body.

If you need to remove a specific CSS property from the element, set it to an empty string.

Copied! 
// ✅ set styles on the body element document.body.style.backgroundColor = 'lime'; document.body.style.color = 'white'; // ✅ remove styles from the body element document.body.style.backgroundColor = ''; 

Note that multi-word property names are camel-cased when using the style object.

# Set styles on the body element using setProperty()

If you don't like CSS property names being camel-cased, you can use the setProperty method instead.

Copied! 
document.body.style.setProperty('background-color', 'lime'); document.body.style.setProperty('color', 'white'); 

The setProperty method takes the following 3 parameters:

1. propertyName - the name of the CSS property we want to modify. Note that property names of multiple words must be hyphenated.
2. value - the new value for the CSS property.
3. priority - can be set to important or an empty string.

# Read CSS property values from the body element

You can also use the style object to read CSS property values from the body element.

Copied! 
document.body.style.backgroundColor = 'lime'; // ✅ read styles of the body element console.log(document.body.style.backgroundColor); // 👉️ "lime" // 👇️ "16px" console.log(window.getComputedStyle(document.body).fontSize); 

The first example reads the value of the background color property on the body element.

However, this wouldn't work if the property was not set as an inline style on the element.

If you need to consider styles set in an external stylesheet, use the window.getComputedStyle method instead.

Copied! 
document.body.style.backgroundColor = 'lime'; // 👇️ "16px" console.log(window.getComputedStyle(document.body).fontSize); 

The getComputedStyle method returns an object that contains the values of all CSS properties of the passed-in element, after applying stylesheets.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник