元素修改祖先class的两种方法 :has, closest()

245 阅读2分钟

image.png

效果:

当input checked=true 的时候修改祖先元素tr的的样式 可以使用js 和 css两种方案

1. JS 获取祖先元素 closest

兼容性

image.png

文档 : Element: closest() method - Web APIs | MDN (mozilla.org)

在 JavaScript 中,closest() 方法用于查找最近的具有指定选择器的祖先元素。该方法接受一个 CSS 选择器作为参数,并返回最近的具有指定选择器的祖先元素,如果不存在则返回 null

closest() 方法从当前元素开始,沿着 DOM 树向上查找祖先元素,直到找到具有指定选择器的元素或到达根元素为止。如果找到具有指定选择器的祖先元素,则返回该元素;否则,返回 null

  // tbody 事件委托
  tbody.addEventListener("click", function (e) {
    e.stopPropagation();
    if (e.target.tagName === "INPUT") {
        // e.target 为当前的input, closest 一次为参照物寻找选择器为tr 的最近祖先
      e.target.closest("tr").classList.toggle("active");
      checkAll.checked = [...checks].every((input) => input.checked === true);
    }
  });

2. CSS 获取祖先元素

兼容性

image.png

tr:has(> td > input:checked) {
  background-color: rgb(236, 236, 236);
}

:has() 伪类选择器来选择具有被选中子元素的祖先元素,并在其上应用样式。

具体来说,这段代码选择了所有具有被选中子元素<input> 的祖先元素,并将它们的样式设置为所需的样式。> td 表示选择所有直接子元素为 <td> 的元素,因此 > td > input:checked 表示选择所有直接子元素为 <td> 的元素中被选中的 <input> 元素。:has(> td > input:checked) 表示选择所有具有被选中子元素 <input> 的祖先元素。

总结

:has() 和 closest() 都是用于查找元素的祖先元素,但它们使用的方式略有不同。

:has() 伪类选择器是一个 CSS 选择器,用于选择具有指定后代元素的祖先元素。它接受一个选择器作为参数,返回所有具有指定后代元素的祖先元素。

例如,:has(> span) 选择所有直接子元素为 <span> 的元素,并返回这些元素的祖先元素。需要注意的是,:has() 伪类选择器目前仅在较新的浏览器中得到支持。

closest() 方法是一个 JavaScript 方法,用于查找最近的具有指定选择器的祖先元素。它接受一个选择器作为参数,返回最近的具有指定选择器的祖先元素。如果不存在,则返回 null

例如,element.closest('.parent') 查找最近的具有 .parent 类的祖先元素,并返回该元素。需要注意的是

总的来说,:has() 伪类选择器和 closest() 方法都可以用于查找元素的祖先元素。选择使用哪种方式取决于具体情况,例如需要选择多个元素还是只需要选择一个元素,以及需要在 CSS 中使用还是在 JavaScript 中使用。