如何使用 .closest() 方法爬上 DOM 树来查找 css 中具有

Question

我想找到正在使用的任何元素，overflow: hidden该元素正在应用于子元素。

我正在使用.closest()需要选择器的函数。

如何指定该选择器以包含文件overflow: hidden中使用的任何父元素.css？

前任。

const parentElement = this.element?.closest();

Answer 1

您不能使用closest来选择特定的 CSS 属性，只有 CSS选择器可以使用它来选择您想要的 HTML。您需要编写一个函数来遍历 DOM 并评估它传递的每个元素。然后，当它受到点击时，它会停止并返回具有该设置属性的元素。在 的帮助下，window.getComputedStyle您可以获取元素上设置的样式。请注意，这还考虑了那些不是在样式表中专门设置而是由浏览器设置的样式。// Select grand child element.const grandChild = document.querySelector('.grand-child');/** * Traverse the DOM upwards and checks the computed styles * of each element is passes. Compares the value of the  * requested property with the passed value and returns  * the element if the value is a match * * @param   {HTMLElement} element Element to start from. * @param   {string} property CSS property to research. * @param   {string} value Value to compare CSS property value with. * @returns {HTMLElement|null} */const findParentWithCSS = (element, property, value) => {  while(element !== null) {    const style = window.getComputedStyle(element);    const propValue = style.getPropertyValue(property);    if (propValue === value) {      return element;    }    element = element.parentElement;  }  return null;};const result = findParentWithCSS(grandChild, 'overflow', 'hidden');console.log(result);.parent {  overflow: hidden;}<div class="grand-parent">  Grand Parent  <div class="parent">    Parent, I have <code>overflow: hidden</code>    <div class="child">      Child      <div class="grand-child">        Grandchild      </div>    </div>  </div></div>

Answer 2

overflow hidden在我的示例中，JavaScript 逻辑从方法指定的父级开始查找具有指定样式的子级closest()。var container_box = document.querySelector('.container_box');var closest_element = container_box.closest('.container');for (let elem of closest_element.children) {&nbsp; &nbsp; if (elem.matches('.container_box')) {&nbsp; &nbsp; &nbsp; if (elem.getAttribute('style') == 'overflow: hidden;') {&nbsp; &nbsp; &nbsp; &nbsp; console.log(elem);&nbsp; &nbsp; &nbsp; &nbsp; elem.setAttribute('style', 'overflow: hidden; background-color: green;');&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; }&nbsp;}<div class="container">&nbsp; <div class="container_box">1</div>&nbsp; <div class="container_box" style="overflow: hidden;">2</div>&nbsp; <div class="container_box">3</div>&nbsp; <div class="container_box">4</div>&nbsp; <div class="container_box">5</div></div>