jquery学习笔记：transform:scale(0.5) 缩放div后 ，jquery获取宽度异常问题记录

使用transform:scale(0.5)缩放后，jquery不同版本获取div宽高异常

#box{
        width: 1000px;
        height: 1000px;
        position: absolute;
        left: 0px;
        top: 0px;
        background-color: #000000;
        transform: scale(0.5);
    }

/*jquery版本:3.0.0*/
//正常缩放下
$('#box').width()    //1000
$('#box')[0].offsetWidth    //1000
//缩放0.5后
$('#box').width()    //500,  测试为499.9968...
$('#box')[0].offsetWidth    //1000
/****************************************************************/
/*jquery版本:3.5.1*/
//正常缩放下
$('#box').width()    //1000
$('#box')[0].offsetWidth    //1000
//缩放0.5后
$('#box').width()    //1000,  测试为999.994
$('#box')[0].offsetWidth    //1000

测试$(’#box’).position().left时两个版本的结果反而一样，实际的结果与transform-origin: 50% 50%;选取的位置有关。

注意：虽然获取值可能出现问题，但赋值却没有影响

$('#box').width(1000)
$('#box')[0].style.width = '1000px'
//两者是一样的

总而言之，如果想获取实际的宽高和left，top,在缩放后应该使用offsetWidth和offsetLeft等js原生属性，否则需按不同jquery版本除以相应的缩放系数才能得到原来的值，但会增大计算误差