Question

我试图用JS创建一个样式表并附加一些规则，但它不起作用。

if (style == null) {
  var style = document.createElement('style');
  style.setAttribute('type', 'text/css');
  style.setAttribute('data-style', 13);
  if (style.styleSheet) {
    style.styleSheet.cssText = '';
  } else {
    style.appendChild(document.createTextNode(''));
  }
  document.head.appendChild(style);

}
if (typeof style.insertRule === 'function') {
  style.insertRule("main > section[data-y='0']{top: 200px;}");
} else if (typeof style.addRule === 'function') {
  style.addRule("main > section[data-y='0']", "{top: 200px;}");
}

对不起我在Js。

中的新人

有人可以告诉我为什么这不起作用吗？

Answer 1

我有类似的任务，我的例子：

 $('head').append('<link rel="stylesheet" type="text/css" href="css/test.css">');
    var sheets = document.styleSheets;
    console.log(sheets) //need to know number of my file, in my case e.g. it was 2
    var sheet = document.styleSheets[2];
    //also you forgot add index in the end of next line
    sheet.insertRule("body { background-color: #000;  }", 1);

这不是一个最好的例子，但它对我有用我找到了关于这个任务的好文章 https://davidwalsh.name/add-rules-stylesheets

Answer 2

GOT IT！

addRule / insertRule不是样式的函数！它是style.sheet的一个功能，我忘了设置索引，所以它应该是

if (typeof style.sheet.insertRule === 'function') {
  style.sheet.insertRule("main > section[data-y='0']{top: 200px;}",0);
} else if (typeof style.sheet.addRule === 'function') {
  style.sheet.addRule("main > section[data-y='0']", "{top: 200px;}",0);
}

创建Styleshhet和insertRule / addRule

2 个答案: