Для получения родительского элемента с определенным 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. Тем не менее, предложенное решение является общепринятым и работает в большинстве случаев.