zoukankan      html  css  js  c++  java
  • jquery或者js获取到元素宽高精确到小数

    首先我们应该知道用jQuery的width()方法获取元素的宽高及样式属性数值时,如果元素的属性是浮点数,会自动四舍五入成整数。

    而如果我们就是想获取实际的带小数的属性数值时该用什么方法。

    在使用获取到的宽度时,为了保证与原来元素的宽度一致,我在工作中处理时有两种解决方案:

    第一种js原生方法getBoundingClientRect()

    $(obj)[0].getBoundingClientRect().width.toFixed(2);  //获取宽度 保留两位小数

    这种方法的width和height兼容性比较差:ie9以上支持width/height属性。

    附上兼容ie6~ie8的width/height的写法:

    var rectWidth = rectObject.right - rectObject.left;
        rectHeight = rectObject.bottom - rectObject.top;

    第一种方如果取left和top,它并不是在position下得left和top值,它是指元素上边或左边到视窗上边或左边的距离;

    兼容性用ie11的Document Mode模式测试,ie5以上都能支持。在ie7及ie7以下left和top会多出两个像素。

    第二种js原生最终样式方法,即 currentStyle 和 getComputedStyle 的兼容写法

    var oAbc = $('.element')[0];
    if(oAbc.currentStyle) {
    //IE、Opera
    alert(oAbc.currentStyle.width);
    var elementX = parseFloat($('.element')[0].currentStyle.left).toFixed(2);
    var elementY = parseFloat($('.element')[0].currentStyle.top).toFixed(2);

    } else {
    //FF、chrome、safari
    var elementX = parseFloat(getComputedStyle($('.element')[0],false).left).toFixed(2);
    var elementY = parseFloat(getComputedStyle($('.element')[0],false).top).toFixed(2);
    }

    getComputedStyle(obj,false):在FF新版本号中仅仅须要第一个參数,即操作对象,第二个參数写“false”也是大家通用的写法,目的是为了兼容老版本号的火狐浏览器。

    建议用第二种,兼容性好,且能同时取到width、height、left、top准确的数值。

  • 相关阅读:
    ConcurrentHashMap的初步使用场景、源码分析讲解(中)
    ConcurrentHashMap的初步使用场景、源码分析讲解(上)
    CyclicBarrier用例、源码分析讲解
    Semaphore用例、源码分析讲解
    CountDownLatch用例、源码分析讲解
    Condition用例、源码分析详解(下)
    Condition用例、源码分析详解(上)
    图解数据结构之数组、链表、栈、队列
    Python--day27--复习
    Python--day26--反射
  • 原文地址:https://www.cnblogs.com/toggle/p/9077419.html
Copyright © 2011-2022 走看看