jquery append new class to style

Question

is it possible to append new class with some CSS rules to an element, for example a div, and add this class to style section?

For example, when user clicks on a button I want to add new class 'newClass' with CSS background-color: red for my div element, and append

.newClass{
background-color: red
}

to my <style> section. Thanks for the help!

As we don't write up code here at SO, provide what you have tried so far. — Asons, Mar 29 '18 at 13:35
Why do you want to do this? Maybe you could show us a [mcve] — Ulysse BN, Mar 29 '18 at 13:35
basically you can create a style tag, check this https://stackoverflow.com/questions/1212500/create-a-css-rule-class-with-jquery-at-runtime — john Smith, Mar 29 '18 at 13:35
You can append an additional style section to your site at the end of your head using: $("head").append(""); — amazedinc, Mar 29 '18 at 13:35

score 2 · Answer 1 · answered Mar 29 '18 at 13:37

You can use 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);

Read more here

So to do it with your button do:

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

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

eborrallo · Answer 2 · 2018-03-29T13:44:41.737

0

try this code , this is written whit vanilla javascrit , if you write it with jq it would be better, but it is works

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

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

edited Mar 29 '18 at 13:44

answered Mar 29 '18 at 13:37

eborrallo

750
1
8
17

jquery append new class to style

2 Answers2