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>

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

2 个答案: