我有以下代碼：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 關注
- 168 瀏覽
添加回答
舉報
0/150
提交
取消