JS下offsetLeft，style.left，以及jQuery中的offset().left，css("left")的區別。

時間 2019-12-09

標籤 offsetleft style.left style left 以及 jquery offset css 區別欄目 JavaScript 简体版

原文原文鏈接

JS下offsetLeft，style.left，以及jQuery中的offset().left，css("left")的區別。javascript

JS下的offsetLeft和style.left，以及jquery的css("left")，對定位的理解類似，若是父元素中有定位元素，都是相對於上一個定位元素（position不爲static）定位。

值得一提的是若是沒有已經定位的父元素，那麼offsetLeft指向的是文檔（document）的左邊緣，而style.left與css（"left"）指向的是body的左邊緣，若是body默認存在margin的話，他們取得的值是不同的。

此外老生常談，css("left")和style.left是帶單位"px"的，而offsetLeft沒有單位，另外，style.left必須是內聯樣式，或者在JS中經過style.left賦值，不然取得的將爲空字符串（在內部樣式和外部樣式中指定left是無效的）。而jquery的css("left")沒有這一限制，顯然使用jquery操做dom的優點就體現出來了。

最後是jquery的offset().left，它永遠是相對於文檔的左邊緣（每每體現爲瀏覽器的左邊緣）定位的，這樣的話使用jquery就能夠在不一樣的應用場景採用不一樣的方法來獲取元素的位置，相比較原生JS有巨大的優點。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body{
            margin:50px;
           /**/

        }
        .wrap{
            width:300px;
            height: 300px;
            background-color: red;
            left:200px;
            position:relative;
        }
        .inner{
            position: absolute;
            width: 100px;
            height: 100px;
            left: 50px;
            background-color: blue;


        }
    </style>
    <script type="text/javascript" src="js/lib/bootstrap/js/jquery-1.11.3.js"></script>
</head>
<body>
<div class="wrap" id="wrap" style="left:200px;">
    <div class="inner" id="inner">
    </div>
</div>

<script type="text/javascript">
    console.log($(".wrap").css("left"));  /*若是父元素中有定位元素，都是相對於上一個定位元素（position不爲static）定位。此處相對於body的左邊，有單位 200px*/
    console.log($(".wrap").offset().left);    /*    它永遠是相對於文檔的左邊緣（每每體現爲瀏覽器的左邊緣）定位的     沒有單位    249.9999999 */
    console.log(document.getElementById("wrap").offsetLeft);  /*若是沒有已經定位的父元素，那麼offsetLeft指向的是文檔（document）的左邊緣   沒有單位  250*/
    console.log(document.getElementById("wrap").style.left);   /*style.left與css（"left"）指向的是body的左邊緣*   有單位    200px/
    console.log($(".inner").css("left"));      /* 相對於上一個定位元素 50px  */
      console.log($(".inner").offset().left);     /*文檔的左邊緣      沒有單位  300*/
    console.log(document.getElementById("inner").offsetLeft);   /*相對於上一級   沒有單位 50*/
//    console.log("若是style.left沒有在內聯樣式中指定："+document.getElementById("inner").style.left);



</script>
</body>
</html>

$(".wrap").css("left") 200px
$(".wrap").offset().left 250
document.getElementById("wrap").offsetLeft 250
document.getElementById("wrap").style.left 200px
$(".inner").css("left") 50px
$(".inner").offset().left 300
document.getElementById("inner").offsetLeft 50

// 總結：1.帶有offset的就沒有單位 px ，js中的 offsetLeft沒有單位，jquery中的offset（）沒有單位，其餘有單位// 2.jquery的offset().left，它永遠是相對於文檔的左邊緣，不是body！！！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。