Question

是否可以将带有一些CSS规则的新类附加到元素（例如div），并将此类添加到样式部分？

例如，当用户点击某个按钮时，我想为我的div元素添加CSS background-color：red 的新类'newClass'，并追加< / p>

.newClass{
background-color: red
}

到我的<style>部分。谢谢你的帮助！

Answer 1

您可以使用CSSStyleSheet.insertRule

 var styleEl = document.createElement('style');

  // Append style element to head
 document.head.appendChild(styleEl);

  // Grab style sheet
 var styleSheet = styleEl.sheet;
 myStyle.insertRule(".myClass { color: red }", 0);

了解更多here

所以用你的按钮来做：

$('#myButton').click(function(){
   var styleEl = document.createElement('style');
   document.head.appendChild(styleEl);

   var styleSheet = styleEl.sheet;
   myStyle.insertRule(".myClass { color: red }", 0);
});

Answer 2

尝试这段代码，这是写成whit vanilla javascrit，如果你用jq编写它会更好，但它是有效的

function changeClass(){
  document.getElementById('asdf').className += " newClass";
}

<style>
    .newClass {
        background-color: red
    }
</style>
<div id='asdf'>
    aaaa
</div>
<button onclick=changeClass()> click</button>

jquery将新类添加到样式中

2 个答案: