CSSStyleDeclaration: метод setProperty()

Базовая Широко поддерживается

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с сентября 2015 года.

Интерфейс метода CSSStyleDeclaration.setProperty() устанавливает новое значение для свойства объекта объявления стиля CSS.

Синтаксис

setProperty(propertyName, value)
setProperty(propertyName, value, priority)

Параметры

propertyName

Строка, представляющая имя свойства CSS (с дефисами) для изменения.

value Необязательно

Строка, содержащая новое значение свойства. Если не указано, обрабатывается как пустая строка. Значение null обрабатывается так же, как пустая строка ("").

Примечание: value не должно содержать "!important", что должно устанавливаться с помощью параметра priority.

priority Необязательно

Строка, позволяющая установить приоритет свойства CSS «важно». Если не указано, обрабатывается как пустая строка. Допускаются следующие значения:

Строковое значение "important"
Ключевое слово undefined
Пустое строковое значение ""

Возвращаемое значение

None (undefined).

Исключения

NoModificationAllowedError DOMException: Выбрасывается, если свойство или блок объявления только для чтения.

Альтернативное использование

Если priority можно опустить, JavaScript имеет специальный более простой синтаксис для установки свойства CSS в объекте объявления стиля:

style.cssPropertyName = "value";

Примеры

В этом примере у нас есть три кнопки, которые можно нажать, чтобы динамически изменить границу, цвет фона и цвет текста абзаца-боксов на случайные значения (см. живой пример в конце этого раздела).

Мы знаем, что правило, которое мы хотим изменить, находится внутри второго таблицы стилей, применённой к странице, поэтому мы получаем ссылку на него, используя document.styleSheets[1]. Затем мы перебираем различные правила, содержащиеся внутри таблицы стилей, которые находятся в массиве по адресу stylesheet.cssRules; для каждого из них мы проверяем, равно ли его свойство CSSStyleRule.selectorText селектору .box p, что указывает, что это тот, который мы хотим.

Если это так, мы сохраняем ссылку на этот объект CSSStyleRule в переменной. Затем мы используем три функции для генерации случайных значений для интересующих свойств и обновляем правило с этими значениями. В каждом случае это делается с помощью метода setProperty(), например boxParaRule.style.setProperty('border', newBorder);.

HTML

<div class="controls">
  <button class="border">Border</button>
  <button class="bgcolor">Background</button>
  <button class="color">Text</button>
</div>
<div class="box">
  <p>Box</p>
</div>

CSS

html {
  background: orange;
  font-family: sans-serif;
  height: 100%;
}

body {
  height: inherit;
  width: 80%;
  min-width: 500px;
  max-width: 1000px;
  margin: 0 auto;
}

.controls {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

div button {
  flex: 1;
  margin: 20px;
  height: 30px;
  line-height: 30px;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100% - 70px);
}

.box p {
  width: 50%;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  height: 150px;
  line-height: 150px;
  background: red;
  border: 5px solid purple;
  color: white;
  transition: all 1s;
}

JavaScript

const borderBtn = document.querySelector(".border");
const bgColorBtn = document.querySelector(".bgcolor");
const colorBtn = document.querySelector(".color");
const box = document.querySelector(".box");

function random(min, max) {
  const num = Math.floor(Math.random() * (max - min)) + min;
  return num;
}

function randomColor() {
  return `rgb(${random(0, 255)} ${random(0, 255)} ${random(0, 255)})`;
}

const stylesheet = document.styleSheets[1];
const boxParaRule = [...stylesheet.cssRules].find(
  (r) => r.selectorText === ".box p",
);

function setRandomBorder() {
  const newBorder = `${random(1, 50)}px solid ${randomColor()}`;
  boxParaRule.style.setProperty("border", newBorder);
}

function setRandomBgColor() {
  const newBgColor = randomColor();
  boxParaRule.style.setProperty("background-color", newBgColor);
}

function setRandomColor() {
  const newColor = randomColor();
  boxParaRule.style.setProperty("color", newColor);
}

borderBtn.addEventListener("click", setRandomBorder);
bgColorBtn.addEventListener("click", setRandomBgColor);
colorBtn.addEventListener("click", setRandomColor);

Результат

Спецификации

Спецификация
CSS Object Model (CSSOM) # dom-cssstyledeclaration-setproperty

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`setProperty`	1	12	1	9	6	18	4	10.1	6	1.0	4.4

© 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/CSSStyleDeclaration/setProperty