如何使用JavaScript媒体查询更改元素的类？

我试图创建一个带有引导的图像的描述，其中如果屏幕的宽度为500px，我想更改图像的类，使其居中（它最初位于屏幕的左侧）。 这是我的密码

const mediaQuery=window.matchMedia（‘（最小宽度：768px）’）
var toonImg=document.getElementById（'toonImg'）；
功能img（e）{
如果（如匹配）{
toonImg.className（“圆角mx自动d块”）
}
}
mediaQuery.addListener（img）
img（mediaQuery）

季节
精灵宝可梦
这是一张更宽的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长

我把它修好了。您必须使用

.classList.add

方法。并且在

img

函数中传递正确的参数使其工作

  const mediaQuery = window.matchMedia('(min-width: 768px)')
var toonImg = document.getElementById('toonImg');
function img(mediaQuery){
    if(mediaQuery.matches){
        toonImg.classList.add("rounded", "mx-auto", "d-block");
        console.log('triggered!');;
    }
}


mediaQuery.addListener(img);
img(mediaQuery);

---

没有名为

className

的函数。而且，这可以在CSS中完成，而不需要任何JavaScript

@media（最小宽度：768px）{#toonImg{/*随便你想要的*/}}

。但它只允许正确更改css值。它还可以添加其他类名吗？不，但不需要。只需使用与要添加的类中相同的值。如果您使用的是诸如LESS或SASS之类的CSS预处理器，您甚至不需要重复代码。