標簽：的區別 stat 十分 tle htm log ntb http get
最近因为工作需要，仔细研究了一下关于JS下offsetLeft，style.left，以及jquery中的offset().left，css("left")的區別。
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就可以在不同的應用場景采用不同的方法來獲取元素的位置，而如果你要像原生的offsetLeft一樣，相對父元素來獲取位置，也可以使用position().left方法來獲取，兩個需求兼顧，十分方便。
下面貼出了測試代碼和圖片，特意給body設置了一個margin來讓大家理解相對于文檔和body的定位差別。
樣式和結構以及JS代碼都放在一起了，方便大家拿走測試。
以下是代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
margin:20px;
}
.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="http://libs.baidu.com/jquery/2.0.3/jquery.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"));
console.log($(".wrap").offset().left);
console.log(document.getElementById("wrap").offsetLeft);
console.log(document.getElementById("wrap").style.left);
console.log($(".inner").css("left"));
console.log($(".inner").offset().left);
console.log(document.getElementById("inner").offsetLeft);
console.log("如果style.left沒有在內聯樣式中指定："+document.getElementById("inner").style.left);
</script>
</body>
</html>
以下是結果圖片：
關于JS下offsetLeft，style.left，以及jquery中的offset().left，css("left")的區別。
標簽：的區別 stat 十分 tle htm log ntb http get
原文地址：https://www.cnblogs.com/itjeff/p/14954986.html
