如何将媒体规则动态添加到元素

Question

我想为网站中的某些元素添加一些灵活的媒体规则。如果我单击一个元素，将打开一种工具栏来更改特定媒体规则的 css 样式。到目前为止一切顺利...

我的第一个想法很简单，用 inline-style 做，但媒体规则不能用 inline-style。

所以我必须寻找另一种方法来动态添加此规则。

也许我创建了一个新的样式集 dynamicalls。

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

但是，我不知道... 1）如何将新类准确地添加到这个新样式集（我有其他样式声明，并且所有样式标记都在没有 id 用作选择器的情况下。） 2）如果我找到一种方法来选择这个样式集，我怎样才能将新类放入想要的媒体规则中 - 我必须使用哪种选择器？

例如，我想将这个新类 ".newclass{font-size:12px;}" 添加到媒体规则 "min-width:920px"

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

最后我想要这个结果

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

我希望有人能告诉我一个更简单的方法来解决这个问题。

非常感谢。

Answer 1

您可以为每个媒体单独创建类，并使用media-query 将该类添加到您的元素中。

例如，

.desktop {
     /* styles */
}


.mobile {
     /* styles */
}

使用media-query将这些类之一添加到元素中

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

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

当然，您可以将它与您的事件处理程序混合使用，例如 onClick()

Answer 2

您应该在样式中定义所有强制类名，并使用addClass 和removeClass 将新规则应用于元素。

请在单击后和单击前检查此 sn-p 并检查元素并检查其类名：

$(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>

编辑：如果您不想预定义所有类，那么您可以使用insertRule 即时创建新的 css 规则，然后使用我描述的方法。详情请查看this Q/A。