个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
29
4
我不知道我哪里错了:/。当我运行这段代码时，我得到的只是一个空白元素。我似乎无法让 insertRule 方法执行任何操作(甚至不产生错误)。我错过了什么吗？
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<script>
var sheet = (function() {
// Create the <style> tag
var style = document.createElement("style");
// WebKit hack
style.appendChild(document.createTextNode(""));
// Add the <style> element to the page
document.head.appendChild(style);
return style.sheet;
})();
sheet.insertRule("\
#gridContainer {\
width: 100%;\
height: 100%;\
}\
", 0);
</script>
</body>
</html>
最佳答案
这有点令人困惑，但您的代码确实有效，只是您在返回的 XML 树中看不到插入的规则。
要验证您的代码是否有效，您可以进行两项测试:
var style = (function() {
// Create the <style> tag
var style = document.createElement("style");
// WebKit hack
style.appendChild(document.createTextNode(""));
// Add the <style> element to the page
document.head.appendChild(style);
console.log(style.sheet.cssRules); // length is 0, and no rules
return style;
})();
style.sheet.insertRule('.foo{color:red;}', 0);
console.log(style.sheet.cssRules); // length is 1, rule added<p class="foo">
I am some text
</p>运行上面的代码片段，您可以看到 CSS 规则确实适用。 cssRules 属性也在控制台中更改。
当浏览器扩展生成附加到 DOM 的自定义样式表时，通常会注意到这一点，并且在调试时它们在检查器中显示为空样式表。
关于javascript - 如何正确使用 CSSStyleSheet.insertRule()？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28930846/
29
4
0
我知道document.styleSheets它由页面中的所有有效样式表组成。我想知道我是否可以创建一个新的并通过 javascript 将其附加到当前列表。 我试过document.styleShe
我不知道我哪里错了:/。当我运行这段代码时，我得到的只是一个空白元素。我似乎无法让 insertRule 方法执行任何操作(甚至不产生错误)。我错过了什么吗？ Test v
我无法弄清楚为什么 .cssRules和 .rules在我简单的颜色生成器元素中不起作用。 我有一个 元素链接我的外部 CSS 文件: 还有一个 在 之前链接我的外部 JS 文件的元素元素: 然
我一直在玩 document.styleSheets API，它主要做我想做的，但是一旦我添加了一堆规则，我希望能够将 shylesheet 对象解析为有效的 css(这样我就可以将它放入一个可下载的
我想通过JavaScript更好的控制CSS变量，需要对CSSRule对象进行操作。 这是获取它的 2 种方法的 JavaScript 代码: // get from the CSSStyleShee
CSSStyleSheet 将区域设置应用于其值是 macOS High Sierra 上 Chrome 版本 65.0.3325.146 中的错误吗？以下 html 重现了错误。它针对俄语系统区域设
我已经阅读了有关使用 Javascript 插入 css 规则的内容，并设法使其正常工作(经过一些试验和错误)。所以我有两个问题: Q.1 为什么索引 的克隆部分文档 有 3 styleSheets
是否可以从 HTMLStyleElement ( document.styleSheets[0] ) 中获取 CSSStyleSheet 对象 ( document.createElement('st
我在使用此代码的 Internet Explorer 11 中遇到“IndexSizeError”错误: var style = document.createElement('style'); do
我尝试使用基于 https://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript 的 typescript 插入一个 c
一个对应一个CSSStyleSheet对象(在document.styleSheets中)，但是怎么找，比如CSSStyleSheet对象对应... console.log(document.styl
在 Code.org 的 App Lab 编辑器中，我们最近开始在 Chrome 64 中看到这个错误: Uncaught DOMException: Failed to read the 'rule
我正在将 Selenium 与 Java 和 Chrome/Firefox 驱动程序一起使用。 FirefoxProfile profile = new FirefoxProfile(); profi
我的代码中出现一个错误，该错误似乎只发生在 Android 版 Chrome 67+ 上。我在使用 Chrome 的任何其他平台上都没有遇到这个问题。这种情况偶尔会发生。 错误信息:SecurityE
啊!我的网站在 Chrome 中损坏了。 在控制台中获取此消息:Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSh
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 关于您编写的代码问题的问题必须在问题本身中描述具体问题 — 并且包括有效代码 以重现它。参见 SSC
我是一名优秀的程序员,十分优秀！