Есть ли способ найти все элементы HTML, которые используют единицы просмотра в своих стилях?

Question

Я создаю инструмент редактора, который для некоторых функций должен изменять размер / уменьшать область просмотра, чтобы отображать больше разделов на странице.

Я не контролирую ввод HTML / CSS / JS Весь CSS это внешний CSS из link тега

Проблема в том, что элементы HTML используют vh как height или min-height в своих стилях.

можно ли искать в DOM элементы, которым назначены vh стили?

Я попытался использовать getComputedStyle, но, как следует из названия функции, он возвращает «вычисленные» стили, например, если у меня есть раздел с height из 80vh

getComputedStyle(el).height
// will return the computed value which is on my screen "655.2px"

То, чего я надеюсь достичь, - это найти эти элементы и временно назначить им вычисленные значения во время представления с уменьшенным размером.

Как я упоминал выше, стили являются внешними, поэтому использование свойства style не даст того, что я ищу.

Answer 1

После некоторых исследований и благодаря комментарию fubar за указание на ответ с использованием document.styleSheets я смог найти решение, которое удовлетворяет мои потребности.

function findVhElements() {
    const stylesheets = Array.from(document.styleSheets)
    const hasVh = str => str.includes('vh');
    // this reducer returns an array of elements that use VH in their height or min-height properties 
    return stylesheets.reduce( (acc,sheet) => { 
        // Browsers block your access to css rules if the stylesheet is from a different origin without proper allow-access-control-origin http header
        // therefore I skip those stylesheets 
        if (!sheet.href || !sheet.href.includes(location.origin)) return acc
        // find rules that use 'vh' in either 'minHeight' or 'height' properties
        const targetRules = Array.from(sheet.rules).filter( ({style}) => style && (hasVh(style.minHeight) || hasVh(style.height)) )
        // skip if non were found
        if (!targetRules.length) return acc;
        // return elements based on the rule's selector that exits on the current document 
        return acc.concat(targetRules.map( ({selectorText}) =>  document.querySelector(selectorText) ).filter( el => el) ) 
    }, [])
}

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