DOM
Использование стилей CSS

замечания

Чтение и изменение встроенных стилей

Встроенный стиль

Вы можете манипулировать встроенным стилем CSS элемента HTML, просто прочитав или изменив его свойство style .

Предположим, что следующий элемент:

<div id="element_id" style="color:blue;width:200px;">abc</div>

С помощью этого JavaScript применяется:

var element = document.getElementById('element_id');

// read the color
console.log(element.style.color); // blue

//Set the color to red
element.style.color = 'red';

//To remove a property, set it to null
element.style.width = null;
element.style.height = null;

Однако, если width: 200px; были установлены во внешней таблице стилей CSS, element.style.width = null не повлияет. В этом случае, чтобы сбросить стиль, вы должны установить его в initial : element.style.width = 'initial' .

Чтение и изменение стилей из таблицы стилей

element.style только считывает свойства CSS, заданные inline, как атрибут элемента. Однако стили часто устанавливаются во внешней таблице стилей. С фактическим стилем элемента можно обращаться с помощью window.getComputedStyle(element) . Эта функция возвращает объект, содержащий фактическое вычисленное значение всех стилей.

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

<div id="element_id">abc</div>
<style type="text/css">
    #element_id {
        color:blue;
        width:200px;
    }
</style>

JavaScript:

var element = document.getElementById('element_id');

// read the color
console.log(element.style.color); // '' -- empty string
console.log(window.getComputedStyle(element).color); // rgb(0, 0, 255)

// read the width, reset it, then read it again
console.log(window.getComputedStyle(element).width); // 200px
element.style.width = 'initial';
console.log(window.getComputedStyle(element).width); // 885px (for example)