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

Unable to add class dynamically on window resize

本文关键字：小时 动态 添加 窗口 调整      更新时间：2023-09-26

这是我试图添加类的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，而不是整个窗口宽度。

为什么人们如此热衷于在这里对每个问题进行投票

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

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

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

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

了解更多信息：CSS@media-queries|MDN-

编辑：

如果您是动态添加类，只需在@media-query:中提及即可

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

保持简单。：）

通过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>
相关文章：