Question

根据this，可以使用disabled属性禁用样式标记。我尝试了下面的内容：

<head>
    <style>body { color: black; }</style>
    <style disabled>body {color: red; }</style>
</head>
<body>
    Hello World !!
</body>

Chrome和Firefox都不尊重disabled属性并使用红色。 IE 11正常工作（显示黑色文本）。

问题：如何在禁用状态下添加内部样式节点（在JS中）？

上下文：我正在动态加载css文件内容作为样式节点，使用document.sytleSheets.cssRules等进行一些规则处理。我不希望当前页面样式受到此临时加载样式的影响。

设置document.sytleSheets[].disabled有效，但节点插入和禁用状态之间存在延迟。

尝试使用new DOMParser().parseFromString(cssFileContent, "text/html")，在加载html内容时工作（完全不可见），但不初始化document.sytleSheets

Answer 1

如何在禁用状态下添加内部样式节点（在JS中）？

HTMLStyleElement interface有一个disabled标记，因此你可以使用它：

var style = document.createElement("style");
// ...usual style stuff...
style.disabled = true;
document.querySelector("head").appendChild(style);

当然，如果浏览器不支持禁用的样式元素（但是），那么这样做不会有任何影响。但是，它不太可能导致错误，因为没有disabled元素的浏览器无论如何都会将它视为“expando”属性，因此它将是无害的。

上下文：我正在动态加载css文件内容作为样式节点，用document.sytleSheets.cssRules等进行一些规则处理。我不希望当前页面样式受到此临时加载的影响风格。

由于您发现了对已停用的样式元素的支持级别存在问题，因此您可以考虑使用隐藏的iframe :( live copy - Stack Snippets不允许使用iframe）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
</head>
<body>
<p>This text should be black.</p>
</script>
<script>
var iframe = document.createElement('iframe');
iframe.style.display = "none";
var html = "<html><head><style>body { color: red; }</style></head><body></body></html>";
document.body.appendChild(iframe);
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(html);
iframe.contentWindow.document.close();
document.body.insertAdjacentHTML(
  "beforeend",
  "First rule: " + iframe.contentDocument.styleSheets[0].cssRules[0].cssText
);
</script>
</body>
</html>

输出：

This text should be black.

First rule: body { color: red; }

...文字为黑色，而不是红色。

（mschr感谢the code to add the iframe with inline HTML可靠地跨浏览器。）

如何将禁用的内部Style节点添加到HTML5 DOM？

1 个答案: