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方式的异同
原文地址:https://www.cnblogs.com/yswinwin/p/9515266.html