如何获取class为move的元素CSS left属性的原始vmin单位值

原因说明 #

• element.style 只能读取元素行内属性中直接声明的样式，通过CSS样式表定义的类样式不会被该属性捕获，因此返回空值。
• getComputedStyle返回的是浏览器计算后的最终绝对像素值，所有相对单位都会被自动转换为px，因此无法直接拿到原定义的vmin单位值。

解决方案 #

方案1：px转vmin（通用推荐） #

vmin的定义是当前视口宽度、高度最小值的1%，因此我们可以先拿到px单位的计算值，再手动换算为vmin单位，换算结果和CSS定义的原始值完全一致：

const firstTimeFunctionPolis = async (id) => {
    // 计算1vmin对应的像素值
    const oneVmin = Math.min(window.innerWidth, window.innerHeight) * 0.01;
    const moveElements = document.getElementsByClassName("move");
    for(let i = 0; i < moveElements.length; i++){
        // 获取计算后的px值并转成数字
        const leftPx = parseFloat(getComputedStyle(moveElements[i]).left);
        // 换算为vmin后拼接单位，可按需调整保留的小数位数
        const leftVmin = `${(leftPx / oneVmin).toFixed(2)}vmin`;
        console.log(leftVmin);
    }
}

方案2：直接读取样式表原始定义值 #

如果需要完全获取CSS文件中写的原始字符串（无需换算），可以遍历浏览器的样式表规则匹配对应类的left属性，该方案仅适用于.move类的left属性在样式表中统一固定定义的场景：

const getCssRuleValue = (selector, prop) => {
    for(const sheet of Array.from(document.styleSheets)) {
        try {
            for(const rule of Array.from(sheet.cssRules || sheet.rules)) {
                if(rule.selectorText === selector) {
                    return rule.style[prop];
                }
            }
        } catch(e) {
            // 跨域样式表会抛出访问异常，直接跳过即可
        }
    }
    return null;
}

const firstTimeFunctionPolis = async (id) => {
    const leftVmin = getCssRuleValue('.move', 'left');
    const moveElements = document.getElementsByClassName("move");
    for(let i = 0; i < moveElements.length; i++){
        console.log(leftVmin);
    }
}

内容的提问来源于stack exchange，提问作者Vivaan4