快速提示：使用Vanilla JavaScript添加或删除CSS类

最新推荐文章于 2024-08-27 08:37:56 发布

dingshi7798

最新推荐文章于 2024-08-27 08:37:56 发布

阅读量179

点赞数

文章标签： javascript ViewUI

Mev-Rael和Panayiotis Velisarakos对该文章进行了同行评审。感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态！

有时，您需要使用JavaScript添加或删除CSS类，而又不想包含整个库（如jQuery）来做到这一点。

当您希望页面元素响应用户操作而更改时，这很有用。

示例用法包括：

显示或隐藏菜单
突出显示表单错误
显示一个对话框
根据选择显示不同的内容
动画以响应单击

有两个JavaScript属性可让您使用类： className和classList 。前者具有广泛的兼容性，而后者则更现代，更方便。如果不需要支持IE 8和IE 9，则可以跳过className 。

我们将从兼容版本开始。

注意：本教程假定您熟悉JavaScript概念，例如函数和变量。

兼容方式修改类

JavaScript className属性使您可以访问HTML元素的class属性。一些字符串操作将使我们添加和删除类。

我们将使用querySelectorAll()访问HTML元素，该元素与IE8及更高版本的浏览器兼容。

新增课程

要添加一个类，我们将编写一个函数，该函数接受要更改的元素，并向所有元素添加指定的类。

function addClass(elements, myClass) {

  // if there are no elements, we're done
  if (!elements) { return; }

  // if we have a selector, get the chosen elements
  if (typeof(elements) === 'string') {
    elements = document.querySelectorAll(elements);
  }

  // if we have a single DOM element, make it an array to simplify behavior
  else if (elements.tagName) { elements=[elements]; }

  // add class to all chosen elements
  for (var i=0; i<elements.length; i++) {

    // if class is not already found
    if ( (' '+elements[i].className+' ').indexOf(' '+myClass+' ') < 0 ) {

      // add class
      elements[i].className += ' ' + myClass;
    }
  }
}

您将很快看到该函数的工作原理，但是要观看该函数的实际操作，请随时使用此CSS：

.red {
  background: red;
}

.highlight {
  background: gold;
}

…以及此HTML：

<div id="iddiv" class="highlight">ID div</div>

<div class="classdiv">Class div</div>
<div class="classdiv">Class div</div>
<div class="classdiv">Class div</div>

以下是该函数本身的一些用法示例：

addClass('#iddiv','highlight');
addClass('.classdiv','highlight');

addClass(document.getElementById('iddiv'),'highlight');
addClass(document.querySelector('.classdiv'),'highlight');
addClass(document.querySelectorAll('.classdiv'),'highlight');

请注意，您可以通过选择器标识要更改的HTML元素，也可以直接传递元素本身。

我们的addClass函数如何工作

我们的addClass函数首先接受两个参数：我们要修改的HTML元素和我们要添加的类。我们的目标是遍历每个HTML元素，确保该类尚不存在，然后添加该类。

首先，如果元素列表为空，则我们的函数无事可做，因此我们可以提早离开。

// if there are no elements, we're done
if (!elements) { return; }

接下来，如果我们选择通过#iddiv或.classdiv类的选择器来标识HTML元素，则可以使用querySelectorAll()来获取所有所需元素。

// if we have a selector, get the chosen elements
if (typeof(elements) === 'string') {
  elements = document.querySelectorAll(elements);
}

但是，如果将DOM元素直接输入到函数中，我们可以遍历它们。如果只有一个DOM元素（而不是列表），我们将其设置为数组，以便我们可以使用相同的循环并简化代码。我们可以判断是否只有一个元素，因为一个元素具有tagName属性，而列表则没有。

// if we have a single DOM element, make it an array to simplify behavior
else if (elements.tagName) { elements=[elements]; }

现在，我们已经可以循环使用一种格式的元素，接下来将遍历每个元素，检查该类是否已经存在，如果没有，我们将添加该类。

// add class to all chosen elements
for (var i=0; i<elements.length; i++) {

  // if class is not already found
  if ( (' '+elements[i].className+' ').indexOf(' '+myClass+' ') < 0 ) {

    // add class
    elements[i].className += ' ' + myClass;
  }
}

注意，为了简化我们正在寻找的模式并避免需要正则表达式，我们在开头和结尾处添加了一个空格。

无论如何，我们都完成了—您现在可以添加一个类！

删除课程

要删除一个类，我们可以使用以下函数：

function removeClass(elements, myClass) {

  // if there are no elements, we're done
  if (!elements) { return; }

  // if we have a selector, get the chosen elements
  if (typeof(elements) === 'string') {
    elements = document.querySelectorAll(elements);
  }

  // if we have a single DOM element, make it an array to simplify behavior
  else if (elements.tagName) { elements=[elements]; }

  // create pattern to find class name
  var reg = new RegExp('(^| )'+myClass+'($| )','g');

  // remove class from all chosen elements
  for (var i=0; i<elements.length; i++) {
    elements[i].className = elements[i].className.replace(reg,' ');
  }
}

大多数removeClass函数的工作方式与我们的addClass函数相同；通过收集所需的HTML元素并遍历它们。唯一的区别是删除类的部分。

这是更详细的类删除：

// create pattern to find class name
var reg = new RegExp('(^| )'+myClass+'($| )','g');

// remove class from all chosen elements
for (var i=0; i<elements.length; i++) {
  elements[i].className = elements[i].className.replace(reg,' ');
}

首先，我们创建一个正则表达式来查找所需类的所有实例。表达式'(^| )'+myClass+'($| )'表示开头或空格，其后是myClass其后是结尾或空格。 'g'表示全局匹配，表示找到模式的所有实例。

使用我们的模式，将类名替换为空格。这样，列表中间的类名将保持分隔，并且如果删除的类位于末尾，则不会有任何危害。

以现代方式修改班级

IE10及更高版本的浏览器支持名为classList的属性，该属性使元素的类更易于处理。

在上一篇文章中，Craig Buckler提供了classList可以做的事情的列表：

可以使用以下属性：

length —应用的类名称的数量
item（index）-特定索引处的类名称
contains（class）—如果节点应用了该类，则返回true
add（class）—将新类应用于节点
remove（class）—从节点移除一个类
toggle（class）—删除或添加一个类（如果分别应用或不应用）

我们可以优先于笨拙的className属性使用它：
document.getElementById("myelement").classList.add("myclass");

让我们使用此信息来创建函数，以从与选择器匹配的所有元素中添加和删除类。

这些函数将获取所有所需的元素，循环遍历它们，并为每个元素添加或删除一个类。

新增课程

function addClass(selector, myClass) {

  // get all elements that match our selector
  elements = document.querySelectorAll(selector);

  // add class to all chosen elements
  for (var i=0; i<elements.length; i++) {
    elements[i].classList.add(myClass);
  }
}

// usage examples:
addClass('.class-selector', 'example-class');
addClass('#id-selector', 'example-class');

删除课程

function removeClass(selector, myClass) {

  // get all elements that match our selector
  elements = document.querySelectorAll(selector);

  // remove class from all chosen elements
  for (var i=0; i<elements.length; i++) {
    elements[i].classList.remove(myClass);
  }
}

// usage examples:
removeClass('.class-selector', 'example-class');
removeClass('#id-selector', 'example-class');