Question

如果我单击一个按钮，则可以为其分配类似于波纹管的功能

document.getElementById("mySidenav").style.width = "250";

这很好，但是我希望为不同的屏幕尺寸给它一个不同的宽度，所以我要在一个类中设置宽度，以便我可以使用CSS媒体查询。而不是.style.width = "250";怎么告诉它采用CSS类的值呢？>

Answer 1

仅供参考，CSS名称不能以数字per the W3C spec开头。您编辑后的帖子不再需要此评论，但值得注意。

要通过JavaScript操作类，请使用className（如myElement.className = 'some-class'）或classList接口。但是，您特别提到了“不同的屏幕尺寸”，这是responsive CSS queries using the @media selector的主要选择。

话虽如此：

JavaScript示例

// CSS
#mySidenav {
     width: 1000px;
}

#mySidenav.responsive-class {
     width: 500px;
}

// JS

const mySidenav = document.querySelector('#mySidenav');

window.addEventListener('resize', function() {
     if (window.innerWidth < 200) {
          mySidenav.classList.add('responsive-class');
     }
     else {
          mySidenav.classList.remove('responsive-class');
     }
});

CSS示例

#mySidenav {
     width: 1000px;
}

@media query and (max-width: 200px) {
     #mySidenav {
          width: 500px;
     }
}

如您所见，后一个示例要简单得多。使用CSS方法。光环将出现在您的上方。

Answer 2

我用@Shenh的答案计算出+1胜的解决方案。

请在下面看到我添加了新课程并删除了课程

    function openNav() {
    document.getElementById("mySidenav").classList.add('popoutwidth');
    }

   function closeNav() {
    document.getElementById("mySidenav").classList.remove('popoutwidth');
   }

点击的JavaScript按类别更改宽度

2 个答案: