jquery猎取rem的值会丧失小数点背面的px大小

2024年2月1日 156次阅读 来源: 小幸运

计算方法，精度丧失来自于浏览器将rem转成px的历程。
element.currentStyle ? element.currentStyle : window.getComputedStyle(element, null)
能够猎取px小数点后的数值

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <title></title>
        <style type="text/css">
            .c {
                width: 1.345rem;
            }
        </style>
    </head>

    <body>
        <div class="c">
            
        </div>
        <script type="text/javascript">
            function getElementStyle(selector) {
                var element = document.querySelector(selector);
                return element.currentStyle ? element.currentStyle : window.getComputedStyle(element, null);
            }
            function getElementStyleValue(selector, cssAttr, isRem) {
                var fontSize = parseFloat(getElementStyle('html').fontSize),
                    elementStyle = getElementStyle(selector);
                    value =  parseFloat(elementStyle[cssAttr]),
                    isRem != false?isRem = true:'';
                if(isRem) {
                    value = (value/fontSize).toFixed(4) + "rem";
                } else {
                    value = value.toFixed(4)+"px";
                }
                console.log(value);
                return value;
            }
            var value1 = getElementStyleValue('.c', 'width');
            var value2 = getElementStyleValue('.c', 'width', false);
            console.log(value1,value2);
        </script>
    </body>

</html>
    原文作者：小幸运
    原文地址: https://segmentfault.com/a/1190000009694995
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞