How to add media-rules dynamically to a element

Question

I want to add some media-rules flexible to some of the elements in a website. If I click an element a kind of toolbar will be opened to change the css-styles for a specific media-rule. So far so good...

My first idea was simple, to do it with inline-style but media rules could not use in inline-style.

So I have to look for another way how I can add dynamically this rules.

Maybe I create a new style-set dynamicalls.

<style>
@media screen and  (min-width:920px) {}
@media screen and  (min-width:720px) {}
@media screen and  (max-width:580px) {}
</style>

But, I don't know... 1) How I can add new classes exactly to this new style-set (I have other style-declaration, and all in the style-tag without a id to use as a selector.) 2) If I find a way to select this style-set, how can I put the new classes into the wanted media rule - wich kind of selector I have to use?

As an example, I want to add this new class ".newclass{font-size:12px;}" to the media ruls "min-width:920px "

$("UNKOWN_SELECTOR").html/append/something_else("\
    .newclass {\
        font-size: 12px;\
    }")
    .appendTo("UNKONWN_SECOND_SELECTOR_TO_MEDIARULE");

At the end I want to have this result

 <style>
    @media screen and  (min-width:920px) { .newclass{font-size:12px;} }
    @media screen and  (min-width:720px) {}
    @media screen and  (max-width:580px) {}
    </style>

I hope someone can tell me a easier way, to solve this.

thanks a lot.

Answer 1

You can create classes seperately for each media and add that classes to your element with media-query .

For example,

.desktop {
     /* styles */
}


.mobile {
     /* styles */
}

Add one of those classes to the element with media-query

@media(max-width: 960px){
    /* add desktop class to your specific element */
}

@media(max-width: 480px){
    /* add mobile class to your specific element */
}

Of course you can mix it with your event handler such as onClick()

Answer 2

You should define all mandatory class names in your styles and use addClass and removeClass to apply new rules to elements.

Please check this snippet and inspect element after click and before click and check its class name:

 $(document).ready(function(){ $("a").click(function(){ $(this).removeClass("defaultClass").addClass("newClass"); }) }) 

 .defaultClass{ font-size:20px; } .newclass{ font-size:20px; } @media screen and (min-width:920px) { .newclass{font-size:12px;} } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a class="defaultClass">Change Font size by clicking Here</a> 

Edit: If you dont want to predefine all classes then you can use insertRule to create new css rules on the fly and then use the method I described. Please check this Q/A for more details.