我有以下代码：const head = document.getElementsByTagName('head')[0];const style = document.createElement('style');const rules = { '.test': 'width: 150px; height: 100px; border: 1px solid red;',};let sheet;head.appendChild(style);sheet = style.sheet;for (const rule in rules) { sheet.insertRule(`${rule} {${rules[rule]}}`, 0);}而且效果很好。但是，当我在将 HTMLStyleElement 的工作表提取到变量后设置 HTMLStyleElement 的“type”属性时，工作表 css 规则将变为空，并且样式将不会应用于页面：head.appendChild(style);sheet = style.sheet;style.type = 'text/css'; // it won't work now!为什么会发生这种情况？工作表引用不应该分配给变量吗？JsBin 链接：https://jsbin.com/gehahiceza/edit?html, js,console
2 回答
月关宝盒
TA贡献1772条经验 获得超5个赞
好的，这是供参考的， https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style
typestyle 元素上是属性而不是属性。任何 html 元素（如 src）内部的内容<img src="">都是属性，而不是 img 元素的属性。
因此，当您尝试为样式变量（即样式元素）的属性赋值时，js 只会在样式变量上创建一个属性（类型），然后分配您给它的值。
我实际上从我的小提琴中观察到了这种行为，我在sheet.insertRule()调用之前和之后添加了一个 console.log 语句，以查看 style.sheet 发生了什么。
我们很清楚，在 .insertRule() 期间，引擎将一个新的样式元素返回到 head 元素的子元素中。在这种情况下，它会过早返回，而不会在 for in 循环中添加样式。
有趣的是，如果你这样做style.type2 = 'css/text'或任何你想要的文字。style.sheet (CSSStyleSheet) 的返回将具有在 中添加的样式rules: ruleList[]。
我希望这至少可以提供一些额外的见解来解释为什么样式在执行时没有出现的原因style.type = 'css/text'
30秒到达战场
TA贡献1828条经验 获得超6个赞
在将样式元素添加到文档之前设置 type 属性。
const head = document.getElementsByTagName('head')[0];
const style = document.createElement('style');
style.setAttribute('type', 'text/css'); //!!!!!!!!!!!
const rules = {
'.test': 'width: 150px; height: 100px; border: 1px solid red;',
};
let sheet;
head.appendChild(style);
sheet = style.sheet;
for (const rule in rules) {
sheet.insertRule(`${rule} {${rules[rule]}}`, 0);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="test">
</div>
</body>
</html>
- 2 回答
- 0 关注
- 80 浏览
添加回答
举报
0/150
提交
取消