在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 相关话题

CSSStyleDeclaration.setProperty() method interface sets a new value for a property on a CSS style declaration object.

句法

style.setProperty(propertyName, value, priority);
					

参数

• propertyName 是 DOMString representing the CSS property name (hyphen case) to be modified.
• value 可选 是 DOMString containing the new property value. If not specified, treated as the empty string.
  • 注意： value must not contain "!important" -- that should be set using the priority 参数。
• priority 可选 是 DOMString allowing the "important" CSS priority to be set. If not specified, treated as the empty string. The following values are accepted:
  • String value "important"
  • 关键词 undefined
  • String empty value ""

返回值

• undefined

异常

• DOMException (NoModificationAllowedError): if the property or declaration block is read only.

若 priority can be omitted, JavaScript has a special simpler syntax for setting a CSS property on a style declaration object:

style.cssPropertyName = 'value';
					

范例

In this example we have three buttons, which can be pressed to dynamically alter our box paragraph's border, background color, and text color to random values (see the live example at the end of this section).

We know that the rule we want to alter to do this is contained inside the second stylesheet applied to the page, so we grab a reference to it using document.styleSheets[1] . We then loop through the different rules contained inside the stylesheet, which are contained in the array found at stylesheet.cssRules ; for each one, we check whether its CSSStyleRule.selectorText property is equal to the selector .box p , which indicates it is the one we want.

If so, we store a reference to this CSSStyleRule object in a variable. We then use three functions to generate random values for the properties in question, and update the rule with these values. In each case, this is done with the setProperty() method, for example 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];
let boxParaRule;
for(let i = 0; i < stylesheet.cssRules.length; i++) {
  if(stylesheet.cssRules[i].selectorText === '.box p') {
    boxParaRule = stylesheet.cssRules[i];
  }
}
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) The definition of 'CSSStyleDeclaration.setProperty()' in that specification.	工作草案
Document Object Model (DOM) Level 2 Style Specification The definition of 'CSSStyleDeclaration' in that specification.	过时

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
setProperty	Chrome 1	Edge 12	Firefox 1	IE 9	Opera 9	Safari 6	WebView Android 4.4	Chrome Android 18	Firefox Android 4	Opera Android 10.1	Safari iOS 6	Samsung Internet Android 1.0

图例

完整支持

完整支持

元数据

• 最后修改： Dec 17, 2019

相关话题

1. CSS Object Model
2. CSSStyleDeclaration
3. 特性

   1. length
   2. parentRule
4. 方法

   1. getPropertyCSSValue()
   2. getPropertyPriority()
   3. getPropertyValue()
   4. item()
   5. removeProperty()
   6. setProperty()
5. Related pages for CSSOM

   1. AnimationEvent
   2. CSS
   3. CSSConditionRule
   4. CSSGroupingRule
   5. CSSKeyframeRule
   6. CSSKeyframesRule
   7. CSSMediaRule
   8. CSSNamespaceRule
   9. CSSPageRule
   10. CSSRule
   11. CSSRuleList
   12. CSSStyleRule
   13. CSSStyleSheet
   14. CSSSupportsRule
   15. CaretPosition
   16. LinkStyle
   17. MediaQueryList
   18. MediaQueryListListener
   19. Screen
   20. StyleSheet
   21. StyleSheetList
   22. TransitionEvent