jQuery offset( ) 方法
生活随笔
收集整理的這篇文章主要介紹了
jQuery offset( ) 方法
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
通過(guò)jQuery 的offset( )方法，我們可以設(shè)置或者獲取被選元素相對(duì)于文檔的位置。需要注意的是，當(dāng)我們獲取被選元素的位置時(shí)，只會(huì)返回匹配到的第一個(gè)元素的位置。當(dāng)我們?cè)O(shè)置被選元素的位置時(shí)，將會(huì)設(shè)置所有匹配到的元素的位置。
注意：該方法返回的是一個(gè)包含left和top屬性的對(duì)象。
（1）獲取位置
語(yǔ)法格式：
$(selector).offset()（2）設(shè)置位置
語(yǔ)法格式：
常規(guī)方式
$(selector).offset({top:value,left:value})函數(shù)方式
$(selector).offset(function(n,current))其中，n為匹配到的元素的索引，current為元素的當(dāng)前位置
示例：
1.獲取位置
（1）兩個(gè)DIV元素，只返回第一個(gè)匹配到的DIV的位置：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script src="../jQuery/jQuery.js"></script><script>$(document).ready(function(){var position = $("div").offset();console.log(position);})</script><style>.one {position: absolute;left: 100px;top: 100px;width: 100px;height: 100px;background-color: rgba(38, 172, 26, 0.644);}.two {position: absolute;left: 200px;top: 200px;width: 100px;height: 100px;background-color: rgba(53, 26, 172, 0.644);}</style> </head> <body><div class="one"></div><div class="two"></div> </body> </html>控制臺(tái)輸出：
2.設(shè)置位置
（1）常規(guī)方式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script src="../jQuery/jQuery.js"></script><script>$(document).ready(function(){$("button").click(function(){$(".para").offset({left:100,top:100})})})</script><style>.para {position: absolute;left: 50px;top: 50px;background-color: rgba(38, 172, 26, 0.644);}</style> </head> <body><button>按鈕</button><p class="para">我是一個(gè)段落。</p> </body> </html>?
點(diǎn)擊按鈕，P元素的位置將會(huì)發(fā)生改變：
（2）函數(shù)方式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script src="../jQuery/jQuery.js"></script><script>$(document).ready(function(){$("button").click(function(){$("div").offset(function(n,current){var newPosition = new Object();newPosition.left = current.left + 200;newPosition.top = current.top + 200;return newPosition;})})})</script><style>.one {position: absolute;left: 50px;top: 50px;width: 100px;height: 100px;background-color: rgba(38, 172, 26, 0.644);}.two {position: absolute;left: 100px;top: 100px;width: 100px;height: 100px;background-color: rgba(53, 26, 172, 0.644);}</style> </head> <body><button>按鈕</button><div class="one"></div><div class="two"></div> </body> </html>點(diǎn)擊按鈕，兩個(gè)DIV的位置都會(huì)被改變：
總結(jié)
以上是生活随笔為你收集整理的jQuery offset( ) 方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 直播过程中的掌声，口哨，背景音等音效怎么
- 下一篇： CScript 错误: 加载设置失败(拒