Question

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

我的第一个想法很简单，可以使用内联样式，但是媒体规则不能以内联样式使用。

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

也许我创建了一个新的样式集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将新规则应用于元素。

请在单击之后并单击之前检查此片段并检查元素，然后检查其类名称：

$(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了解更多详情。

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

2 个答案: