JavaScript if语句替代语法
JavaScript if语句替代语法
提问于 2019-07-01 08:44:32
我想检查屏幕的大小，并根据屏幕的大小切换一个类。
Html
<div id="item" class="test"></div>脚本
window.addEventListener("load", toggleClass);
window.addEventListener("resize", toggleClass);
function toggleClass() {
var w = window.innerWidth;
item = document.getElementById("item");
if ( w > 700 ) {
item.classList.remove("test");
}else {
if ( item.classList.contains("test")) {
}else {
item.classList.add("test");
}
}
}回答 3
Stack Overflow用户
回答已采纳
发布于 2019-07-01 08:46:04
您不需要首先测试classList中是否包含test -您只需无条件地添加它。此外，避免隐式创建全局变量-始终使用var (或者，最好是const或let)声明新的变量名：
function toggleClass() {
var w = window.innerWidth;
var item = document.getElementById("item");
if ( w > 700 ) {
item.classList.remove("test");
}else {
item.classList.add("test");
}
}Stack Overflow用户
发布于 2019-07-01 08:53:57
您还可以使用Conditional (ternary) operator
function toggleClass() {
var item = document.getElementById("item");
(window.innerWidth > 700) ? item.classList.remove("test") : item.classList.add("test");
}Stack Overflow用户
发布于 2019-07-01 09:09:08
另一种方法-而不是在较小的尺寸上添加类-使用媒体查询来应用您想要的样式-显然，如果您将该类用于样式以外的目的-此方法可能不起作用-但如果您所做的只是根据屏幕的宽度设置元素的样式-那么媒体查询就是您的朋友。
这种方法的好处(如果你正在做纯粹的样式更改)是不需要js的-浏览器将自动使用媒体查询匹配的任何样式。这对于性能更好，因为re不需要运行js。
@media screen and (max-width: 699px) {
p {
font-size: 14px
}
}
@media screen and (min-width: 700px) {
p {
font-size: 16px
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56829027
复制相关文章
相似问题
腾讯云开发者
