Работа с CSS через Javascript

Получение всех CSS-свойств элемента ( метод window.getComputedStyle() )

Метод window.getComputedStyle() возвращает объект, содержащий значения всех CSS-свойств элемента после применения всех активных таблиц стилей и завершения базовых вычислений значений, которые они могут содержать.

Синтаксис метода window.getComputedStyle():

let style = window.getComputedStyle(element [, pseudoElt]);

1	let style = window.getComputedStyle(element [, pseudoElt]);

где

element - элемент (Element), CSS-свойства которого необходимо получить (вставка узлов, которые не являются элементами, например, #text, выдаст ошибку);
pseudoElt (необязательный) - строка указывающая на найденный псевдоэлемент (опускается или null - для не псевдоэлементов).

Возвращённый объект style - "живой" объект CSSStyleDeclaration, который обновляется автоматически при изменении стилей элемента, только для чтения и может быть использован для инспектирования стиля элемента (включая описание из <style> элемента или внешней таблицы стилей).

ВАЖНО! Для использования метода window.getComputedStyle() для какого-либо элемента необходимо дождаться загрузки этого элемента (страницы) (используйте window.load или расположите скрипт ниже необходимого элемента).

Пример:

window.onload = function () {
let btnBuyCss = document.getElementById("btnBuy");
let res = window.getComputedStyle(btnBuyCss, null);
console.log(res);
}

window.onload = function () {

let btnBuyCss = document.getElementById("btnBuy");

let res = window.getComputedStyle(btnBuyCss, null);

console.log(res);

}

Использование метода window.getComputedStyle() с псевдоэлементами

Метод getComputedStyle() может получить информацию о стилях из псевдоэлемента (например, ::after, ::before, ::marker, ::line-marker и т.д.):

<style>
  h3::after {
    content: "rocks!";
  }
</style>

<h3>generated content</h3>

<script>
  var h3 = document.querySelector("h3");
  var result = getComputedStyle(h3, ":after").content;

  console.log("the generated content is: ", result); // "the generated content is:  "rocks!"
</script>

<style>

h3::after {

content: "rocks!";

}

</style>

<h3>generated content</h3>

var h3 = document.querySelector("h3");

var result = getComputedStyle(h3, ":after").content;

console.log("the generated content is: ", result); // "the generated content is: "rocks!"

</script>

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

Самый простой способ управления стилями CSS с помощью JS - это манипулирование атрибутом style отдельных элементов документа (подробнее об атрибуте элемента и свойстве элемента). При этом свойство style объекта Element имеет одну отличительную особенность: его значением является не строка, а объект CSSStyleDeclaration. Свойства этого объекта представляют CSS-свойства, определенные в HTML-атрибуте style.

Итак:

атрибут элемента – это код (строки) HTML;
свойство элемента – это поле DOM-объекта.

Для нестандартных атрибутов DOM свойство узла как объекта DOM не создаётся.

Например:

<style>
  h3 {
    font-weight: 100; // именование атрибута содержит дефис
  }
</style>

<h3>Некоторый текст</h3>

<script>
  let h3 = document.querySelector("h3");
  h3.style.fontWeight = "bold"; // свойство, соответствующее атрибуту с дефисом, - через CamelCase
  h3.style.color = "red";
</script>

<style>

h3 {

font-weight: 100; // именование атрибута содержит дефис

}

</style>

<h3>Некоторый текст</h3>

let h3 = document.querySelector("h3");

h3.style.fontWeight = "bold"; // свойство, соответствующее атрибуту с дефисом, - через CamelCase

h3.style.color = "red";

</script>

Свойства стиля объекта CSSStyleDeclaration имеют тип всех значений string.

Например:

<style>
  h3 {
    position: absolute;
    font-family: sans-serif;
  }
</style>

<h3>Некоторый текст</h3>

<script>
  let h3 = document.querySelector("h3");
  h3.style.position = "relative"; // значения имеют тип string
  h3.style.fontFamily = "sans-serif";
  h3.style.color = "red";
</script>

<style>

h3 {

position: absolute;

font-family: sans-serif;

}

</style>

<h3>Некоторый текст</h3>

let h3 = document.querySelector("h3");

h3.style.position = "relative"; // значения имеют тип string

h3.style.fontFamily = "sans-serif";

h3.style.color = "red";

</script>

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

  h3.style.left = "600"; // Неправильно: отсутствуют единицы измерения
  h3.style.left = "600px"; // Правильно

1 2	h3.style.left = "600"; // Неправильно: отсутствуют единицы измерения h3.style.left = "600px"; // Правильно

Особенности именования свойств объекта CSSStyleDeclaration:

Если имя CSS-атрибута содержит дефисы (например, font-size), имя свойства объекта CSSStyleDeclaration образуется путем удаления дефисов и использования записи формата CamelCase (например, CSS-атрибут border-left-width доступен через свойство borderLeftWidth).
Если CSS-свойство имеет имя, совпадающее с зарезервированным словом языка JavaScript (например, float), к этому имени добавляется префикс «css». В результате получим свойство cssFloat объекта CSSStyleDeclaration.

Особенности использования свойств объекта CSSStyleDeclaration:

Атрибут <style> HTML-элемента - это его встроенный стиль, который в целом удобно использовать для начальной установки значений стиля. Однако сценарии JS могут читать свойства объекта CSSStyleDeclaration, только если эти свойства были ранее установлены сценарием на языке JavaScript или если HTML-элемент имеет встроенный атрибут style, установивший нужные свойства, например:

<style>
  h3 {
    position: absolute;
    font-family: "Times New Roman", Times, serif;
  }
</style>

<h4 style="padding: 20px"></h4>

<h3>Некоторый текст H3</h3>
<h4>Некоторый текст H4</h4>

<script>
  let h3 = document.querySelector("h3");
  let h4 = document.querySelector("h4");

  console.log(h3.style.position); // пустая строка, свойство не установлено сценарием JS или атрибутом style

  console.log(h4.style.padding); // "20px"  свойство  установлено атрибутом style элемента h4

  h3.style.fontFamily = "sans-serif"; // установим свойство сценарием JS
  console.log(h3.style.fontFamily); // "sans-serif"
</script>

<style>

h3 {

position: absolute;

font-family: "Times New Roman", Times, serif;

}

</style>

<h3>Некоторый текст H3</h3>

<h4>Некоторый текст H4</h4>

let h3 = document.querySelector("h3");

let h4 = document.querySelector("h4");

console.log(h3.style.position); // пустая строка, свойство не установлено сценарием JS или атрибутом style

console.log(h4.style.padding); // "20px" свойство установлено атрибутом style элемента h4

h3.style.fontFamily = "sans-serif"; // установим свойство сценарием JS

console.log(h3.style.fontFamily); // "sans-serif"

</script>

Чтение встроенного стиля элемента представляет особую сложность, когда выполняется чтение свойств стиля, имеющих единицы измерения, а также свойств сокращенной формы записи (сценарий должен включать реализацию синтаксического анализа строк с CSS-стилями, чтобы обеспечить возможность извлечения и дальнейшего использования значений). Иногда бывает проще прочитать или записать единственную строку во встроенный стиль элемента, чем обращаться к объекту CSSStyleDeclaration. Для этого можно использовать методы getAttribute() и setAttribute() объекта Element или свойство cssText объекта CSSStyleDeclaration (подробнее...).

Добавление элементам классов, атрибутов и CSS-стилей (их удаление и проверка наличия)

Class или style

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

cоздать класс в CSS и в HTML как <div class="..."> и использовать его;
определять стили непосредственно в атрибуте style как <div style="...">.

JavaScript может менять и классы, и свойство style, однако определение и изменение классов – предпочтительный вариант по сравнению с изменением style.

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

  let top = /* вычисление во время работы скрипта */; 
  let left = /* вычисление во время работы скрипта */; 
  elem.style.left = left; // например, '333px'
  elem.style.top = top; // например, '555px'

let top = /* вычисление во время работы скрипта */;

let left = /* вычисление во время работы скрипта */;

elem.style.left = left; // например, '333px'

elem.style.top = top; // например, '555px'

В остальных случаях целесообразно описывать в CSS и добавлять в класс - это более гибкое и лёгкое в поддержке решение.

[свернуть]

Добавление классов

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

  tag.className { 
    property_1: value; 
    property_2: value;  
  }

tag.className {

property_1: value;

property_2: value;

}

где

tag - тег, к которому применяется class;
className - пользовательское имя класса class (имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) и подчеркивания (_), использование кириллицы в именах классов недопустимо).

Чтобы указать в коде HTML, что тег используется с определённым классом, к тегу добавляется атрибут class="className":

<div class="myClass" id="div_2"></div>  
document.getElementById("div_2").className // 'myClass'

1 2	<div class="myClass" id="div_2"></div> document.getElementById("div_2").className // 'myClass'

Добавление одного класса с помощью свойства className:

Присваивание какого-либо значения свойству className элемента полностью заменяет всю строку классов:

<div class="myClass foo bar" id="div_2"></div>

<script>
  document.getElementById("div_2").className; // 'myClass foo bar'
  document.getElementById("div_2").className = "newMyClass";
  document.getElementById("div_2").className; // 'newMyClass' (замена всей строки)
</script>

document.getElementById("div_2").className; // 'myClass foo bar'

document.getElementById("div_2").className = "newMyClass";

document.getElementById("div_2").className; // 'newMyClass' (замена всей строки)

</script>

Добавление (удаление) выбранного класса из нескольких с помощью объекта (псевдомассива) classList:

Методы объекта classList:

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <h2>Мои примеры</h2>
  </head>
  <body>
    <div id="div_1">
      <li>Привет</li>
      <li>Мир</li>
    </div>
    <ul id="ul"></ul>
  </body>
</html>

<script>

  let myElement = document.getElementById("div_1");
  myElement.classList.add("foo"); // <div id="div_1" class="foo"> ... </div>
  myElement.classList.add("bar"); // <div id="div_1" class="foo bar"> ... </div>
  myElement.classList.remove("bar"); // <div id="div_1" class="foo"> ... </div>
  myElement.classList.toggle("baz"); // <div id="div_1" class="foo baz"> ... </div>
  console.log(myElement.classList); // DOMTokenList(2) ['foo', 'baz', value: 'foo baz']

// полная замена строки классов
  myElement.classList.value = "baz" // <div id="div_1" class="baz"> ... </div>

</script>

<!DOCTYPE html>

<head>

<h2>Мои примеры</h2>

</head>

<body>

<li>Привет</li>

</div>

</body>

</html>

let myElement = document.getElementById("div_1");

myElement.classList.add("foo"); // <div id="div_1" class="foo"> ... </div>

myElement.classList.add("bar"); // <div id="div_1" class="foo bar"> ... </div>

myElement.classList.remove("bar"); // <div id="div_1" class="foo"> ... </div>

myElement.classList.toggle("baz"); // <div id="div_1" class="foo baz"> ... </div>

console.log(myElement.classList); // DOMTokenList(2) ['foo', 'baz', value: 'foo baz']

// полная замена строки классов

myElement.classList.value = "baz" // <div id="div_1" class="baz"> ... </div>

</script>

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

Добавление и удаление атрибутов

В CSS селекторы атрибутов позволяют установить стиль для конкретных элементов DOM по присутствию определённого атрибута тега или его значения.

У каждого элемента есть некоторый набор стандартных атрибутов (свойств), описанных в стандарте HTML именно для этого элемента (тега), например для <a> это будут href, name, а для <img> это будут src, alt, и т.д. Итак:

атрибуты – это код (строки) HTML;
свойство – это поле DOM-объекта.

Для нестандартных атрибутов DOM свойство узла как объекта DOM не создаётся.

Пример

<h2 id="myMeta" lang="ru" myAttr="myAttr">Заголовок H2</h2>

<script>
  let myAttr = document.getElementById("myMeta");
  console.log(myAttr); // <h2 id="myMeta" lang="ru" myattr="myAttr">Заголовок H2</h2>
  myMeta.id; // myMeta
  myAttr.lang; // ru
  myAttr.myAttr; // undefined (нестандартный атрибут)
</script>

<h2 id="myMeta" lang="ru" myAttr="myAttr">Заголовок H2</h2>

let myAttr = document.getElementById("myMeta");

console.log(myAttr); // <h2 id="myMeta" lang="ru" myattr="myAttr">Заголовок H2</h2>

myMeta.id; // myMeta

myAttr.lang; // ru

myAttr.myAttr; // undefined (нестандартный атрибут)

</script>

[свернуть]

Доступ к атрибутам осуществляется при помощи методов:

работающих со значением, которое находится в HTML:
- elem.hasAttribute(nameAttr) – проверяет наличие атрибута;
- elem.getAttribute(nameAttr) – получает значение атрибута;
- elem.setAttribute(nameAttr, value) – устанавливает атрибут;
- elem.removeAttribute(nameAttr) – удаляет атрибут;
свойства elem.attributes, которое содержит объект NamedNodeMap{}.

В отличие от свойств, атрибуты:

всегда являются строками;
их имя нечувствительно к регистру (это HTML);
видны в innerHTML.

Пример

<h2 id="myMeta" lang="ru" myAttr="myAttr">Заголовок H2</h2>

<script>

  let myAttr = document.getElementById("myMeta");
  console.log(myAttr); // <h2 id="myMeta" lang="ru" myattr="myAttr">Заголовок H2</h2>

  myAttr.hasAttribute("LANG"); // true (нечувствителен к регистру)
  myAttr.hasAttribute("myAttr"); // true
  myAttr.getAttribute("myAttr"); // 'myAttr' (получаем значение нестандартного атрибута)
  myAttr.setAttribute("myAttr", "newMyAttr"); // (изменим значение атрибута myAttr)
  myAttr.getAttribute("myAttr"); // 'newMyAttr'
  myAttr.removeAttribute("myAttr");
  console.log(myAttr); // <h2 id="myMeta" lang="ru">Заголовок H2</h2>

</script>

<h2 id="myMeta" lang="ru" myAttr="myAttr">Заголовок H2</h2>

let myAttr = document.getElementById("myMeta");

console.log(myAttr); // <h2 id="myMeta" lang="ru" myattr="myAttr">Заголовок H2</h2>

myAttr.hasAttribute("LANG"); // true (нечувствителен к регистру)

myAttr.hasAttribute("myAttr"); // true

myAttr.getAttribute("myAttr"); // 'myAttr' (получаем значение нестандартного атрибута)

myAttr.setAttribute("myAttr", "newMyAttr"); // (изменим значение атрибута myAttr)

myAttr.getAttribute("myAttr"); // 'newMyAttr'

myAttr.removeAttribute("myAttr");

console.log(myAttr); // <h2 id="myMeta" lang="ru">Заголовок H2</h2>

</script>

[свернуть]

Методы getAttibute(), setAttribute() и removeAttribute() сразу же меняют HTML-атрибуты элемента (в отличие от DOM-свойств), что вызовет браузерную перерисовку (вы сможете увидеть все изменения, изучив элемент с помощью инструментов разработчика в браузере). Такие перерисовки не только требуют больше ресурсов, чем установка DOM-свойств, но и могут привести к непредвиденным ошибкам. Как правило, их используют для элементов, у которых нет соответствующих DOM-свойств, например, colspan, или для HTML-свойств при наследовании.

Добавление (удаление) CSS-стилей

Свойство элемента element.style – это объект, поля которого соответствуют тому, что написано в атрибуте style, например:

// Установка style в HTML
<h2 id="myMeta" lang="ru" myAttr="myAttr" style="font-size: 20px">
      Заголовок H2
    </h2>

// Определение style через свойство element.style
<script>
  let myAttr = document.getElementById("myMeta");
  console.log(myAttr.style.fontSize); // 20px (получаем значение)
  myAttr.style.fontSize = "40px"; // (можно задать новое значение)
</script>

// Установка style в HTML

Заголовок H2

</h2>

// Определение style через свойство element.style

let myAttr = document.getElementById("myMeta");

console.log(myAttr.style.fontSize); // 20px (получаем значение)

myAttr.style.fontSize = "40px"; // (можно задать новое значение)

</script>

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

font-size => elem.style.fontSize;
background-color => elem.style.backgroundColor;
border-left-width => elem.style.borderLeftWidth.

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

button.style.MozBorderRadius = '5px';
button.style.WebkitBorderRadius = '5px'.

Сброс стилей:

element.style = "none" или
element.style = "".

<h2 id="myMeta" lang="ru" myAttr="myAttr" style="font-size: 20px">

<script>
  let myAttr = document.getElementById("myMeta");
  console.log(myAttr); // <h2 id="myMeta" lang="ru" myAttr="myAttr" style="font-size: 20px">
  
  myAttr.style = "none";
  console.log(myAttr); // <h2 id="myMeta" lang="ru" myAttr="myAttr" style>
// или
  myAttr.style = "";
  console.log(myAttr); // <h2 id="myMeta" lang="ru" myAttr="myAttr" style>
</script>

let myAttr = document.getElementById("myMeta");

console.log(myAttr); // <h2 id="myMeta" lang="ru" myAttr="myAttr" style="font-size: 20px">

myAttr.style = "none";

console.log(myAttr); // <h2 id="myMeta" lang="ru" myAttr="myAttr" style>

// или

myAttr.style = "";

console.log(myAttr); // <h2 id="myMeta" lang="ru" myAttr="myAttr" style>

</script>

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

Установка нескольких стилей в одной строке (свойство style.cssText и метод setAttribute() ):

myAttr.style.cssText = "font-size: 40px; background-color: red";

1	myAttr.style.cssText = "font-size: 40px; background-color: red";

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

То же самое можно сделать установкой атрибута методом setAttribute():

myAttr.setAttribute("style", "font-size: 40px; background-color: yellow");

1	myAttr.setAttribute("style", "font-size: 40px; background-color: yellow");

Получение всех CSS-свойств элемента ( метод window.getComputedStyle() )

Синтаксис метода window.getComputedStyle():

Использование метода window.getComputedStyle() с псевдоэлементами

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

Особенности именования свойств объекта CSSStyleDeclaration:

Особенности использования свойств объекта CSSStyleDeclaration:

Добавление элементам классов, атрибутов и CSS-стилей (их удаление и проверка наличия)

Добавление классов

Добавление одного класса с помощью свойства className:

Добавление (удаление) выбранного класса из нескольких с помощью объекта (псевдомассива) classList:

Добавление и удаление атрибутов

Добавление (удаление) CSS-стилей

Сброс стилей:

Установка нескольких стилей в одной строке (свойство style.cssText и метод setAttribute() ):

Добавить комментарий Отменить ответ