Javascript 无法在调整窗口大小时动态添加类

这是我试图添加类的div

<div id="sidebar" class="addthis_recommended_horizontal col-lg-4 col-md-4 col-sm-6 col-xs-12""></div>

但是这个班级没有被增加，我不知道为什么

编辑 我正在使用媒体查询。在这种情况下，两个类具有相同的名称，如果我更改其中一个，另一个也会更改，因此我动态添加一个类，并且我需要更改的是div而不是整个窗口宽度

为什么人们如此热衷于否决这里的每个问题？

当您通过

document.getElementById

选择元素时，不要使用

#

在css/jQuery选择器中使用，而不是在普通JavaScript中使用。另外，在窗口大小调整中添加一个类名到下面的代码> 640 ，当在上面的代码> 640 中修改时，也应该考虑删除该类。

请尝试使用以下代码：

<script>
    window.onresize=function() {
       var sidebar = document.getElementById("sidebar");
       var width = sidebar.clientWidth;
       if(width<640) {
           sidebar.className ="sidebar";
       }
       else{
           sidebar.className = ""; //assuming this element doesn't have any other classes.
       }
    }
</script>

window.onresize=function（）{
var sidebar=document.getElementById（“sidebar”）；
var width=侧边栏.clientWidth；
如果（width因为您在调整窗口大小时更改元素的宽度，理想情况下您应该使用CSS3的@media查询

在您的情况下，@media查询将是：

<style>
    @media (max-width: 640px){
        #sidebar{
            width: 45%;
        }
    }
</style>


@介质（最大宽度：640像素）{
#边栏{
宽度：45%；
}
}

仅仅为了这个目的编写Javascript是个坏主意

了解更多信息：

编辑：

如果要动态添加类，只需在@media查询中提到：

<style>
    @media (max-width: 640px){
        .sidebar{
            width: 45%;
        }
    }
</style>


@介质（最大宽度：640像素）{
.侧边栏{
宽度：45%；
}
}

保持简单。
没有
class
，只有
className
属性。也可以使用
.classList.add（“侧栏”）
“
仅在jQuery选择器中使用，而不是在普通JavaScript中。”-
#
用于CSS选择器，而不是“jQuery选择器”，并用于普通的JavaScript方法，如
document.querySelector（）
和
document.queryselectoral（）
（除其他几种方法外）。[Note to OP]媒体查询不支持IE8及以下版本。[Note to OP]如果您想在IE8中使用mediaqueries，则必须使用Respond.js。这是为浏览器启用媒体查询的polyfill。我正在使用媒体查询，但在这种情况下不能使用它们。@此外，您也可以为动态添加的类设置媒体查询。：）请参阅我的答案中的编辑。@Mr_Green IE8不存在您只得到了一个down v注：/（我没有投你反对票）问题是这个问题没有那么糟糕，因此没有得到反对票。
<script>
   window.onresize=function() {
       var sidebar = $("#sidebar");
       var width = sidebar.width();
       if(width<640) {
           sidebar.addClass("sidebar");
       }
       else{
           sidebar.removeClass("sidebar");
       }
   }
</script>

<style>
    @media (max-width: 640px){
        #sidebar{
            width: 45%;
        }
    }
</style>

<style>
    @media (max-width: 640px){
        .sidebar{
            width: 45%;
        }
    }
</style>