jquery将新类附加到样式[复制]

Question

这个问题在这里已有答案：

• Add to a css class using JQuery 5个答案

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

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

.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

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

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

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