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

时间:2015-02-09 06:37:19

标签: javascript html css

这是我试图添加类

的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而不是整个窗口宽度,我需要更改。

为什么人们如此关注这里的每一个问题?

2 个答案:

答案 0 :(得分: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>

保持简单。 :)

答案 1 :(得分:0)

#选择元素时,请勿使用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>