Использование динамической информации об оформлении

Модель объекта CSS (CSSOM), являющаяся частью DOM, предоставляет определённые интерфейсы, позволяющие манипулировать обширным объёмом информации о CSS. Первоначально определённые в рекомендации DOM Level 2 Style, эти интерфейсы теперь являются частью спецификации Модель объекта CSS (CSSOM), которая предназначена для её замены.

Во многих случаях, и когда это возможно, лучшей практикой является динамическое изменение классов через свойство className, так как конечный вид всех элементов оформления может быть контролируем в одном стилевом файле. Код JavaScript также становится более чистым, так как вместо того, чтобы быть посвящённым деталям оформления, он может сконцентрироваться на общей семантике каждого раздела, который он создаёт или изменяет, оставляя точные детали стиля стилевому файлу. Однако существуют случаи, когда получение или изменение правил может быть полезным (будь то для целых стилевых файлов или отдельных элементов), и это подробно описано ниже. Обратите также внимание, что, как и в случае со стилями отдельных элементов DOM, когда речь идёт о манипулировании стилевыми файлами, это не является изменением физических документов, а только внутреннего представления документа.

Базовый style объект предоставляет интерфейсы Stylesheet и CSSStylesheet. Эти интерфейсы содержат члены, такие как insertRule, selectorText, и parentStyleSheet, для доступа и изменения отдельных правил стиля, которые составляют стилевой файл CSS.

Чтобы получить объекты style из объекта document, можно использовать свойство Document.styleSheets и получить доступ к отдельным объектам по индексу (например, document.styleSheets[0] — это первый стилевой файл, определённый для документа, и т. д.).

Изменение правила стилевого файла с помощью CSSOM

В этом примере фоновый цвет страницы устанавливается в red с помощью CSS. Затем JavaScript получает доступ к свойству с помощью CSSOM и меняет фоновый цвет на cornflowerblue.

<p>The stylesheet declaration for the body is modified via JavaScript.</p>

body {
  background-color: red;
  font: 1.2em / 1.5 sans-serif;
  color: white;
  padding: 1em;
}

const stylesheet = document.styleSheets[1];
stylesheet.cssRules[0].style.backgroundColor = "cornflowerblue";

Список свойств, доступных в DOM из свойства style, приведён на странице Список свойств CSS в DOM.

Чтобы изменить стили документа с помощью синтаксиса CSS, можно вставить правила или вставить теги <style>, у которых свойство innerHTML установлено на желаемый CSS.

Изменение стиля элемента

Свойство элемента style (см. также раздел «Объект стиля DOM» ниже) также может использоваться для получения и установки стилей элемента. Однако это свойство возвращает только те атрибуты стиля, которые были заданы внутри элемента (например, обращение к element.style.color для элемента, определённого как <td style="background-color: lightblue"> возвращает строку "", даже если у элемента есть color, определённый через стилевой файл).

Также, когда вы устанавливаете это свойство для элемента, вы переопределяете любые стили, которые были заданы в другом месте для данного свойства элемента, которое вы устанавливаете. Установка свойства border , например, переопределит настройки, сделанные в другом месте для свойства border этого элемента в разделе head или внешних стилевых файлах. Однако это не повлияет на другие объявления свойств для стилей этого элемента, такие как отступы, поля или шрифт, например.

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

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style example</title>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    </script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    </style>
  </head>

  <body>
    <!-- passes a reference to the element's object as parameter 'this'. -->
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    </p>

    <!-- passes the 'p1' id of another element's style to modify. -->
    <button onclick="resetStyle('p1');">Reset background color</button>
  </body>
</html>

Метод getComputedStyle() объекта document.defaultView возвращает все стили, которые фактически были вычислены для элемента.

Объект стиля DOM

Объект style представляет собой отдельное объявление стиля. К объекту стиля можно получить доступ из объекта document или из элементов, к которым этот стиль применяется. Он представляет встроенные стили конкретного элемента.

Установка свойств стиля

Более важным, чем два упомянутых свойства, является использование объекта style для установки отдельных свойств стиля элемента:

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Style Property Example</title>
    <link rel="StyleSheet" href="example.css" />
    <script>
      function setStyle() {
        document.getElementById("d").style.color = "orange";
      }
      function resetStyle() {
        document.getElementById("d").style.color = "black";
      }
    </script>
  </head>

  <body>
    <div id="d" class="thunder">Thunder</div>
    <button onclick="setStyle()">Click here to change text color</button>
    <button onclick="resetStyle()">Reset text color</button>
  </body>
</html>

Тип и среда стиля могут быть указаны или нет.

Использование метода setAttribute

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

const el = document.getElementById("some-element");
el.setAttribute("style", "background-color:darkblue;");

Однако следует учитывать, что setAttribute удаляет все остальные style свойства, которые могли быть уже определены в объекте style элемента. Если у элемента some-element выше был атрибут style со значением, скажем, style="font-size: 18px", это значение будет удалено при использовании setAttribute.

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information