Javascript 使用jQuery异步设置或覆盖特定@media query下的CSS属性

我知道如何使用jQuery函数为每个匹配的元素设置一个或多个CSS属性：

$（'p'）.CSS（'color'，'red'）

但如何在特定媒体查询规则下设置CSS属性

您能告诉我如何使用JavaScript/jQuery在特定媒体查询下设置

元素的颜色属性吗

@media (max-width: 600px) {
    p {
        color: red;
    }
}

更新 假设我们有一个颜色选择器控件（例如在WP Customizer中）和一个HTML元素，它将根据颜色控件在

@media（max width:600px）

下异步更改其颜色。现在，如何基于颜色控件在特定的

@media

查询下异步设置CSS属性？

您可以使用（无需jQuery）

大概是这样的：

if (window.matchMedia("(max-width: 600px)").matches) {
  /* the viewport is less than 600 pixels */
}

片段（为演示更改了值）

if（window.matchMedia（（最大宽度：800px）”）.matches）{
var p=document.getElementsByTagName（'p'）；
对于（变量i=0；i

p{
颜色：蓝色
}

text

您可以使用（无需jQuery）

大概是这样的：

if (window.matchMedia("(max-width: 600px)").matches) {
  /* the viewport is less than 600 pixels */
}

片段（为演示更改了值）

if（window.matchMedia（（最大宽度：800px）”）.matches）{
var p=document.getElementsByTagName（'p'）；
对于（变量i=0；i

p{
颜色：蓝色
}

---

text

您需要使用带有调整大小选项的窗口

$(window).resize(function(){
    if ($(window).width() <= 800){  
        $('element').css({color: 'red'})
    }   
});

$（窗口）。调整大小（函数（）{
如果（$（window）.width（）您需要使用window.with和resize选项

$(window).resize(function(){
    if ($(window).width() <= 800){  
        $('element').css({color: 'red'})
    }   
});

$（窗口）。调整大小（函数（）{
if（$（window）.width（）基于dippas答案，但在更改时始终检查宽度以应用样式：


var mediaquery=window.matchMedia（（最大宽度：600px）”，
text=document.querySelector（“p”）；
函数mediaChange（mediaquery）{
if（mediaquery.matches）{
text.style.color=“蓝色”；
}否则{
text.style.color=“红色”；
}
}
mediaChange（mediaquery）；
mediaquery.addListener（mediaChange）；
Lorem ipsum Door sit amet，Concetetur Adipising elit.
基于dippas答案，但始终检查宽度，以便在更改时应用样式：


var mediaquery=window.matchMedia（（最大宽度：600px）”，
text=document.querySelector（“p”）；
函数mediaChange（mediaquery）{
if（mediaquery.matches）{
text.style.color=“蓝色”；
}否则{
text.style.color=“红色”；
}
}
mediaChange（mediaquery）；
mediaquery.addListener（mediaChange）；
Lorem ipsum dolor sit amet，Concertetur Adipising elit.
您甚至可以使用jQuery
resize（）
方法来实现这一点。
媒体查询
也就是说是
如果条件
，即我们正在检查
如果
@媒体（最大宽度：600px）
最大宽度为600px或小于600px
，因此此时在my
DOM
中执行更改

试试这个。
你甚至可以使用jQuery
resize（）
方法来做这件事。
媒体查询
也就是说是
如果条件
，也就是说，我们正在检查
如果
@Media（最大宽度：600px）
最大宽度是600px或小于600px
，所以在这一点上，在我的
DOM中执行更改

试试这个。
让我添加这个，我想覆盖CSS属性，而不是使用
if
语句。没有if语句你就不能这么做！如果你想编辑样式表，我想你不能用JavaScript（如果我错了，有人纠正我）。您需要服务器端语言，例如PHP。让我添加这一点，我想覆盖CSS属性，而不是使用
if
语句。没有if语句，您就无法做到这一点！如果您想编辑样式表，我想您不能使用JavaScript（如果我错了，请有人纠正我）。您需要服务器端语言，例如PHP。