javascript - 新的 CSSStyleDeclaration

Question

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

但是，new CSSStyleDeclaration() 会抛出一个Illegal Constructor 错误。所以我尝试了 Object.create(CSSStyleDeclaration.prototype)，这似乎有效，但生成的对象行为不正常。例如，在以这种方式创建的 CSSStyleDeclaration 上调用 .cssText 会引发 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>