如果我点击一个按钮,我可以为它分配一个功能,如下所示
document.getElementById("mySidenav").style.width = "250";
这很好用,但是我希望为不同的屏幕尺寸提供不同的宽度,所以我打算在一个类中设置宽度,以便我可以使用 css 媒体查询。
而不是 .style.width = "250";
我如何告诉它取 CSS 类的值?>
最佳答案
仅供引用,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 方法。光环会出现在你身上。
关于单击按类更改宽度的 JavaScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52932856/