Question

我想检查屏幕的大小并根据屏幕的大小切换一个类。

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");
    }
  }
}

Answer 1

您无需先测试test中是否包含classList-您可以无条件添加它。另外，避免隐式创建全局变量-始终使用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");
  }
}

Answer 2

您也可以使用Conditional (ternary) operator

function toggleClass() {
    var item = document.getElementById("item");
    (window.innerWidth > 700) ? item.classList.remove("test") : item.classList.add("test");
}

Answer 3

一种不同的方法-而不是添加较小的类-使用媒体查询来应用所需的样式-显然，如果您出于除样式之外的目的使用该类-这种方法可能不起作用-但如果您要做的只是根据屏幕的宽度设置元素的样式-那么媒体查询就是您的朋友。

这种方法的好处（如果您正在进行纯样式的更改）是不需要js的-浏览器将自动使用与媒体查询匹配的任何样式。这对于性能更好，因为re不需要运行js。

@media screen and (max-width: 699px) {
 p {
    font-size: 14px
  }
}

@media screen and (min-width: 700px) {
 p {
    font-size: 16px
  }
}

JavaScript if语句替代语法

3 个答案: