使用 JavaScript 将类添加到父元素

作者

使用 JavaScript 将类添加到父元素

Add class to a parent Element using JavaScript

将类添加到父元素：

  1. 选择子元素。
  2. 使用该parentElement属性获取对父节点的访问权限。
  3. 调用classList.add()父类的方法，将类名作为参数传递给它。

以下是本文示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      .yellow-bg {
        background-color: yellow;
      }
    </style>
  </head>

  <body>
    <div data-id="parent-1">
      <div id="child">Child 1</div>
    </div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const child = document.getElementById('child');

child.parentElement.classList.add('yellow-bg');

将类添加到父元素

我们使用节点上的
parentElement
属性来访问其父节点。

下一步是使用
classList.add
方法向父级添加一个类。

您可以根据需要将尽可能多的类传递给该add()方法。

索引.js
const child = document.getElementById('child');

child.parentElement.classList.add(
  'yellow-bg',
  'second-class',
  'third-class'
);
如果一个类已经存在于节点上，该add()方法将忽略特定的类。

同样，如果需要从父类中删除一个或多个类，请使用
remove()方法。

索引.js
child.parentElement.classList.add(
  'yellow-bg',
  'second-class',
  'third-class'
);

child.parentElement.classList.remove(
  'yellow-bg',
  'second-class'
);

如果您需要将一个类添加到不是该节点的直接父级的元素，请使用
closest()
方法来选择该元素。

该closest()方法遍历Element及其父节点，直到找到与提供的选择器匹配的节点。

假设我们需要在这个例子中选择divwith idof 。parent-1

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      .yellow-bg {
        background-color: yellow;
      }
    </style>
  </head>

  <body>
    <div id="parent-1" data-id="parent-1">
      <span id="parent-2">
        <div id="child">Child 1</div>
      </span>
    </div>

    <script src="index.js"></script>
  </body>
</html>

下面是我们如何div使用 JavaScript 向元素添加类。

索引.js
const child = document.getElementById('child');

child.closest('#parent-1').classList.add('yellow-bg');
我们使用closest方法而不是属性，因为我们试图将类添加到不是直接父元素的元素。 parentElement

如果元素本身与选择器匹配，则返回该元素。

如果不存在与提供的选择器匹配的元素，则该closest()方法返回null。

该方法采用包含选择器的字符串。提供的选择器可以根据需要指定。

索引.js
const child = document.getElementById('child');

child.closest('body > div#parent-1').classList.add('yellow-bg');

我们使用该closest()方法选择div带有idof
的元素parent-1，该body元素作为其父元素。

如果向该closest() 方法提供了无效的选择器字符串，SyntaxError则抛出一个。

进一步阅读

–

发表评论