如何使用 .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) {

    if (elem.matches('.container_box')) {

      if (elem.getAttribute('style') == 'overflow: hidden;') {

        console.log(elem);

        elem.setAttribute('style', 'overflow: hidden; background-color: green;');

      };

    }

 }

<div class="container">

  <div class="container_box">1</div>

  <div class="container_box" style="overflow: hidden;">2</div>

  <div class="container_box">3</div>

  <div class="container_box">4</div>

  <div class="container_box">5</div>

</div>