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' ，NULL）;

请参阅此链接：How to change/remove CSS classes definitions at runtime?。

希望这有帮助。

在JS中修改先前定义的样式

1 个答案: