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准确的数值。

  • 相关阅读:
    Maven 安装 / 常用配置 / 阿里maven中央仓库
    记录:框架
    Mysql配置文件详解 my.cof
    Vmware虚拟机设置静态IP地址
    虚拟机安装centos发现inet为127.0.0.1,导致Xshell连接不上
    Servlet小案例总结
    Win10 提升系统响应速度
    从顶端插入,滚动展示(Demo):
    eclipse +cygwin+C++
    大型网站技术学习-3. 容器Docker与kubernetes
  • 原文地址:https://www.cnblogs.com/toggle/p/9077419.html
Copyright © 2011-2022 走看看