效果:
当input checked=true 的时候修改祖先元素tr
的的样式
可以使用js 和 css两种方案
1. JS 获取祖先元素 closest
兼容性
文档 : 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 获取祖先元素
兼容性
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 中使用。