javascript - 修改之前在JS中定义的样式

Question

创建样式的函数构造如下

function createStyle(css) {
  var head = document.head || document.getElementsByTagName("head")[0];
  var style = document.createElement("style");
  style.type = "text/css";
  if(style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    var textNode = document.createTextNode(css);
    style.append(textNode);
  }
  head.append(style);
}

灵感来自 Christoph and TomFuertes code .然后调用创建类名为tab

的样式

createStyle(`
  .tab button {
    background: inherit;
    float: left;
    outline: none;
    border: none;
    padding: 8px 6px;
    width: 60px;
    cursor: pointer;
  }
`);

和一个使用样式的 HTML 元素

var div = document.createElement("div");
div.className = "tab";
parent.append(div);

也被创建。所以一切正常。

之后我需要用类名tab修改样式，下面是代码

var style = document.getElementsByTagName("style");
var css = style[0].innerHTML
var className = css.split(" ")[0].split(".")[1];

用于获取样式类名。我已经设法获得样式类名称 tab 以及包含 css 中对象的字符串。

问题是如何在不修改字符串和重新创建样式的情况下修改样式？或者如果我必须这样做，如果已经有一些我没有记录通过数组 sytle[] 访问它们的顺序的样式，我应该如何删除以前定义的样式。

建议的解决方案

使用 How to change/remove CSS classes definitions at runtime? Achu 建议我做了这个功能

// Change style attribute with value
function changeStyleAttribute(style, attr, value) {
  var N = document.styleSheets.length;
  var styles = document.styleSheets;
  for(var i = 0; i < N; i++)
  {
    if(styles[i].rules[0].selectorText == style)
    styles[i].rules[0].style[attr] = value;
  }
}

这叫做

changeStyleAttribute(".tab", "width", "299px");

并且有效。我希望有另一个更好更简单的解决方案。

Answer 1

你会想要使用 document.styleSheets[i].cssRules 这是一个你需要解析的数组来找到你想要的，然后 rule.style.setProperty('font-size','10px' ,空);

请引用此链接:How to change/remove CSS classes definitions at runtime? .

希望这对您有所帮助。