jquery幾種獲取元素left方式的異同
阿新 • • 發佈：2018-08-22
pan min blue 坐標 utf-8 text cli 包括 NPU
offset()函數用於設置或返回當前匹配元素相對於當前文檔的偏移，也就是相對於當前文檔的坐標。該函數只對可見元素有效。
該函數返回一個坐標對象(Object)，該對象有一個left屬性和top屬性。屬性值均為數字，它們都以像素(px)為單位。
與position()不同的是：offset()返回的是相對於當前文檔的坐標，position()返回的是相對於其定位的祖輩元素的坐標。
該函數屬於jQuery對象(實例)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,div{
margin: 0;
padding: 0;
}
#dv{
width: 200px;
height: 200px;
background-color: orange;
margin-left: 200px;
position: absolute;
}
</style>
<script src = "jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
var divLeft = $("#dv").offset()
console.log(divLeft);//輸出的結果是一個對象 ：Object {top: 21, left: 200}
var divLeft2 = $("#dv").offset().left;
console.log(divLeft2);//輸出結果是 200 數字類型
var divLeft3 = $("#dv").css("left");
console.log(divLeft3);//輸出結果是 0px 字符串類型，不包括margin ,border:
var divLeft4 = $("#dv").scrollLeft();
console.log(divLeft4);//輸出的是 0 數字類型 獲取的是卷曲出去的值
//offset()設置參數
//offset()傳入參數的格式 {"left":100,"top":100}
$("#dv").offset({"left":100,"top":100});
setTimeout(function() {
$("#dv").offset({"left":"200","top":"200"});
}, 2000);
//傳入的值可以是字符串，但是不能帶px
});
})
</script>
</head>
<body>
<input type="button" name="" id="btn" value="顯示效果" />
<div id="dv"></div>
</body>
</html>
jquery幾種獲取元素left方式的異同