单击按类更改宽度的 JavaScript

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 方法。光环会出现在你身上。