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

Question

这是我要添加类的 div

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

这是我正在使用的脚本

<script>window.onresize=function()
{var width=document.getElementById("#sidebar").clientWidth;
if(width<640) {document.getElementById("#sidebar").setAttribute("class",".sidebar");}
</script>

添加这个类后，这段CSS代码改变了宽度

.sidebar.at4-recommended-item{width:45%!important}

但是课程没有被添加，我不知道为什么？

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

为什么人们如此热衷于对这里的每一个问题投反对票？

Answer 1

由于您要在调整窗口大小时更改元素的宽度，因此理想情况下您应该改用 CSS3 的 @media 查询！

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

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

仅为此目的编写 Javascript 是个坏主意。

了解更多： CSS @media queries | MDN

编辑：

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

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

保持简单。 :)

Answer 2

当您通过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>

如果你想使用 jQuery，那么，

<script>
   window.onresize=function() {
       var sidebar = $("#sidebar");
       var width = sidebar.width();
       if(width<640) {
           sidebar.addClass("sidebar");
       }
       else{
           sidebar.removeClass("sidebar");
       }
   }
</script>