Question

我正在尝试使用浏览器的内置类型CSSStyleDeclaration以编程方式传递和修改样式（由于具有.cssText属性，因此很方便）。

但是，new CSSStyleDeclaration()引发了Illegal Constructor错误。因此，我尝试了Object.create(CSSStyleDeclaration.prototype)，它似乎可以工作，但是生成的对象无法正常工作。例如，在以这种方式创建的.cssText上调用CSSStyleDeclaration会抛出Illegal invocation。

是否有“正确”的方法来构建CSSStyleDeclaration？还是有更好的方法使用内置类型以编程方式创建样式？

（我不想进行字符串操作，而宁愿避免创建自己的类型或添加第三者依赖性。）

Answer 1

您可以创建一个临时DOM元素并使用其style属性：

const rules = document.createElement('span').style;
rules.backgroundColor = 'red';
rules.cursor = 'pointer';
rules.color = 'white';

document.getElementById('style_string').innerHTML = rules.cssText;
document.getElementById('obj').style = rules.cssText;

<pre id="style_string"></pre>
<div id="obj">TEST</div>

Answer 2

无法创建CSSStyleDeclaration对象，但是在setProperty上使用CSSStyleDeclaration方法将使事情变得容易并重新使用样式（作为对象）。

我们可以使用连字符大小写，也可以设置优先级。

const applyStyles = (element, styles) => {
  Object.entries(styles).forEach(([prop, val]) => {
    const [value, pri = ""] = val.split("!");
    element.style.setProperty(prop, value, pri);
  });
};

const parent_styles = {
  "font-size": "18px",
  "font-weight": "bold",
  "background-color": "lightgrey",
  color: "red",
  padding: "10px !important",
  margin: "20px",
  width: "100px !important",
  border: "1px solid blue"
};

const child_styles = {
  "font-size": "18px",
  "background-color": "white",
  color: "green"
};

const parent = document.getElementById("parent");
const child = document.getElementById("child");

applyStyles(parent, parent_styles);
applyStyles(child, child_styles);

<div id="parent"> 
    Hello
    <div id="child"> World </div>
</div>

Answer 3

就像您可以通过使用属性来添加/编辑样式一样：

document.querySelector("h1").style.color = '#369'

您还可以为样式对象分配多个样式规则：

const h1 = document.querySelector("h1")
const rules = {
    color: '#369',
    width: '100px'
}
Object.assign(h1.style, rules)

然后添加更多规则而不破坏现有的内联样式：

const moreRules = {
    margin: '35px',
    height: '100px'
}
Object.assign(h1.style, moreRules)

证明：

h1.style.cssText
// "color: rgb(51, 102, 153); width: 100px; margin: 35px; height: 100px;"

新的CSSStyleDeclaration

3 个答案: