码迷,mamicode.com
首页 > Web开发 > 详细

jquery获取rem的值会丢失小数点后面的px大小

时间:2020-05-14 12:45:03      阅读:73      评论:0      收藏:0      [点我收藏+]

标签:fun   rem   nim   获取   utf-8   elements   idt   use   scale   

计算方法,精度损失来自于浏览器将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>

jquery获取rem的值会丢失小数点后面的px大小

标签:fun   rem   nim   获取   utf-8   elements   idt   use   scale   

原文地址:https://www.cnblogs.com/baimeishaoxia/p/12887626.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!