Question

我正在构建一个编辑器工具，对于某些功能，它需要调整大小/缩小视口以在页面上显示更多部分。

我无法控制HTML / CSS / JS的输入所有CSS是来自link标签的外部CSS

问题是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的comment使用document.styleSheets将我指向answer，我得以提出一种满足我需要的解决方案。

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标头允许您获取其内容

有没有办法找到所有使用样式中的视口单位的HTML元素？

1 个答案: