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

Question

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

我的第一个想法很简单，用内联样式来做，但是媒体规则不能用在内联样式中。

所以我必须寻找另一种方式来动态添加这些规则。

也许我可以动态创建一个新的样式集。

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