Как получить родительский элемент с определенным CSS-свойством?

Для получения родительского элемента с определенным CSS-свойством в JavaScript, вам потребуется использовать методы обхода по DOM-дереву и проверку свойств элементов.

Существует несколько подходов к решению этой задачи, но один из наиболее распространенных - это использование цикла while для последовательного проверки свойств родительских элементов.

Вот пример кода, который позволяет получить родительский элемент с определенным CSS-свойством:

function findParentWithCSSProperty(element, cssProperty) {
  let currentElement = element.parentNode;
  
  while (currentElement) {
    const styles = window.getComputedStyle(currentElement); // Получаем текущие CSS-свойства элемента
    
    if (styles.getPropertyValue(cssProperty)) {
      return currentElement; // Возвращаем элемент, если найдено совпадение
    }
    
    currentElement = currentElement.parentNode; // Переходим к родительскому элементу
  }
  
  return null; // Возвращаем null, если родительский элемент не найден
}

Этот код итерирует по родительским элементам от заданного элемента до корневого элемента документа, проверяя свойство с помощью метода getPropertyValue объекта window.getComputedStyle. Если свойство равно заданному значению, мы возвращаем текущий элемент. Если ни один из родительских элементов не содержит заданное свойство, функция возвращает null.

Пример использования функции:

const element = document.getElementById('myElement');
const parent = findParentWithCSSProperty(element, 'background-color');

console.log(parent);

В этом примере мы ищем родительский элемент с заданным идентификатором (myElement) и проверяем, есть ли у него CSS-свойство background-color. Затем мы выводим найденный элемент в консоль.

Это основной подход к решению задачи. Однако, в зависимости от требований вашего проекта, могут быть и другие варианты реализации, такие как использование рекурсии или вспомогательной библиотеки, такой как jQuery. Тем не менее, предложенное решение является общепринятым и работает в большинстве случаев.