jQuery如何获取rem的值会丢失小数点后面的px大小-职坐标

jQuery如何获取rem的值会丢失小数点后面的px大小

沉沙 2018-06-28 来源：阅读 1855 评论 0

摘要：本篇教程通过代码讲解了jQuery如何获取rem的值会丢失小数点后面的px大小，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

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

本文由职坐标整理发布，欢迎关注职坐标WEB前端jQuery频道，获取更多jQuery知识！

jquery实战中文版pdf 精通jquery第2版pdf jquery菜鸟教程

本文由 @沉沙发布于职坐标。未经许可，禁止转载。