Question

我知道如何使用JS将样式表添加到HTML文档中：

// given CSS as text, add a <style> to the document
function addStyle(css) {
  var style = document.createElement("style");
  style.type = "text/css";
  style.appendChild(document.createTextNode(css));
  document.head.appendChild(style);
}

如何创建一个可以打开和关闭此（仅限于此）样式表的复选框？

This answer提供了有关如何在JS中操作样式表的提示，但似乎没有一种方法定位特定样式表而没有looping through document.styleSheets并且与{{匹配1}}，这似乎很笨拙。

有没有更好的方法来实现这一点，理想情况下没有jQuery，而不是双循环？

（我的特定用例是针对用户脚本（例如Greasemonkey），虽然我避免GM_addStyle的可移植性。所有这些都意味着我无法直接控制HTML;我修改其他网站。）

Answer 1

在写这个问题时，我想出了答案，虽然它仍然留下了如何操作预先存在的样式表而没有太多循环的问题。

基本上，我无法使用getElementById()或querySelector()按style属性查找id元素（因为它不在body中），我可以在创建它时保存对象：

// given CSS as text, add a <style> to the document and return it
function addStyle(css) {
  var style = document.createElement("style");
  style.type = "text/css";
  style.appendChild(document.createTextNode(css));
  document.head.appendChild(style);
  return style;
}

var toggler = addStyle(`
  tr.informational { display:none; }
`);

// create and insert the toggling checkbox
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.checked = true;
checkbox.onchange = function() { toggler.disabled = ! toggler.disabled };
var label = document.createElement("label"); // <label> allows clicking on text
label.appendChild(checkbox);
label.appendChild(document.createTextNode("Hide informational rows"));

document.getElementById("buttons").appendChild(label); // add to button panel

我以前认为Greasemonkey的安全性在加载完成后无法访问其对象。这意味着checkbox.onchange()行不起作用。因此，我的原始代码非常难看，通过循环toggler_index找到我的CSS然后通过硬编码索引在JS中构建独立的JS来找到document.styleSheets[]：

checkbox.setAttribute("onchange", `
  var toggler = document.styleSheets[`+toggler_index+`];
  toggler.disabled = ! toggler.disabled;
`);

感谢StackOverflow在简化我的问题时强迫我质疑我的假设！

在JS中添加一个StyleSheet并允许它动态切换

1 个答案: