我有以下代碼：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);}而且效果很好。但是，當(dāng)我在將 HTMLStyleElement 的工作表提取到變量后設(shè)置 HTMLStyleElement 的“type”屬性時(shí)，工作表 css 規(guī)則將變?yōu)榭?，并且樣式將不?huì)應(yīng)用于頁(yè)面：head.appendChild(style);sheet = style.sheet;style.type = 'text/css'; // it won't work now!為什么會(huì)發(fā)生這種情況？工作表引用不應(yīng)該分配給變量嗎？JsBin 鏈接：https://jsbin.com/gehahiceza/edit?html, js,console
2 回答
月關(guān)寶盒
TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超5個(gè)贊
好的，這是供參考的，?https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style
typestyle 元素上是屬性而不是屬性。任何 html 元素（如 src）內(nèi)部的內(nèi)容<img src="">都是屬性，而不是 img 元素的屬性。
因此，當(dāng)您嘗試為樣式變量（即樣式元素）的屬性賦值時(shí)，js 只會(huì)在樣式變量上創(chuàng)建一個(gè)屬性（類型），然后分配您給它的值。
我實(shí)際上從我的小提琴中觀察到了這種行為，我在sheet.insertRule()調(diào)用之前和之后添加了一個(gè) console.log 語(yǔ)句，以查看 style.sheet 發(fā)生了什么。
我們很清楚，在 .insertRule() 期間，引擎將一個(gè)新的樣式元素返回到 head 元素的子元素中。在這種情況下，它會(huì)過(guò)早返回，而不會(huì)在 for in 循環(huán)中添加樣式。
有趣的是，如果你這樣做style.type2 = 'css/text'或任何你想要的文字。style.sheet (CSSStyleSheet) 的返回將具有在 中添加的樣式rules: ruleList[]。
我希望這至少可以提供一些額外的見(jiàn)解來(lái)解釋為什么樣式在執(zhí)行時(shí)沒(méi)有出現(xiàn)的原因style.type = 'css/text'
30秒到達(dá)戰(zhàn)場(chǎng)
TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超6個(gè)贊
在將樣式元素添加到文檔之前設(shè)置 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 關(guān)注
- 160 瀏覽
添加回答
舉報(bào)
0/150
提交
取消