當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

js，jquery获取页面元素距离浏览器工作区顶端的距离

發(fā)布時(shí)間：2025/3/20 HTML 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 js，jquery获取页面元素距离浏览器工作区顶端的距离小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

先介紹幾個(gè)屬性：（暫時(shí)只測了IE和firefox，實(shí)際上我工作中用到的最多的是chrome）

?網(wǎng)頁被卷起來的高度/寬度（即瀏覽器滾動(dòng)條滾動(dòng)后隱藏的頁面內(nèi)容高度）

(javascript) ? ? ? ?document.documentElement.scrollTop //firefox

(javascript) ? ? ? ?document.documentElement.scrollLeft //firefox

(javascript) ? ? ? ?document.body.scrollTop?//IE

(javascript) ? ? ? ?document.body.scrollLeft //IE

(jqurey) ? ? ? ? ? ? $(window).scrollTop()?

(jqurey) ? ? ? ? ? ??$(window).scrollLeft()

?網(wǎng)頁工作區(qū)域的高度和寬度?

(javascript) ? ? ??document.documentElement.clientHeight// IE firefox ? ? ??

(jqurey) ? ? ? ? ? ??$(window).height()

?元素距離文檔頂端和左邊的偏移值?

(javascript) ? ? ? ?DOM元素對(duì)象.offsetTop //IE firefox

(javascript) ? ? ? ?DOM元素對(duì)象.offsetLeft //IE firefox

(jqurey) ? ? ? ? ? ??jq對(duì)象.offset().top

(jqurey) ? ? ? ? ? ??jq對(duì)象.offset().left

獲取頁面元素距離瀏覽器工作區(qū)頂端的距離

?頁面元素距離瀏覽器工作區(qū)頂端的距離? =? 元素距離文檔頂端偏移值 ?-?? 網(wǎng)頁被卷起來的高度?

即：

?頁面元素距離瀏覽器工作區(qū)頂端的距離 =? DOM元素對(duì)象.offsetTop? -? document.documentElement.scrollTop?

舉個(gè)應(yīng)用例子：(個(gè)人習(xí)慣用jqurey，免去兼容性煩惱)

利用?頁面元素距離瀏覽器工作區(qū)頂端/左端的距離來實(shí)現(xiàn)一個(gè)提示框在頁面不同位置時(shí)候保證提示信息顯示的正確位置，如圖所示附代碼

可見不管輸入框在哪里，提示框信息永遠(yuǎn)都顯示在正確的位置，而不會(huì)在彈出提示框時(shí)候被擋住

code（上面例子的html頁面,需引用jquery-1.8.2.min.js）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="jquery-1.8.2.min.js"></script><script>$(document).ready(function () {});function UseKeyTo(c) {var inputControl = $(c);if (!document.getElementById('province')) {$('body').append('<div id="province" style="position:absolute;border:1px solid #808080;width:540px;height:197px;border-radius: 3px;background-color:#ccc;display:block;"><div class="c" v="京">(京)北京市00</div><div class="c" v="津">(津)天津市01</div><div class="c" v="滬">(滬)上海市02</div><div class="c" v="渝">(渝)重慶市03</div><div class="c" v="瓊">(瓊)海南省04</div><div class="c" v="黑">(黑)黑龍江05</div><div class="c" v="蒙">(蒙)內(nèi)蒙古06</div><div class="c" v="冀">(冀)河北省07</div><div class="c" v="晉">(晉)山西省08</div><div class="c" v="魯">(魯)山東省09</div><div class="c" v="吉">(吉)吉林省10</div><div class="c" v="蘇">(蘇)江蘇省11</div><div class="c" v="皖">(皖)安徽省12</div><div class="c" v="浙">(浙)浙江省13</div><div class="c" v="閩">(閩)福建省14</div><div class="c" v="贛">(贛)江西省15</div><div class="c" v="遼">(遼)遼寧省16</div><div class="c" v="豫">(豫)河南省17</div><div class="c" v="鄂">(鄂)湖北省18</div><div class="c" v="湘">(湘)湖南省19</div><div class="c" v="粵">(粵)廣東省20</div><div class="c" v="桂">(桂)廣西省21</div><div class="c" v="新">(新)新疆區(qū)22</div><div class="c" v="陜">(陜)陜西省23</div><div class="c" v="甘">(甘)甘肅省24</div><div class="c" v="寧">(寧)寧夏區(qū)25</div><div class="c" v="青">(青)青海省26</div><div class="c" v="川">(川)四川省27</div><div class="c" v="藏">(藏)西藏區(qū)28</div><div class="c" v="云">(云)云南省29</div><div class="c" v="貴">(貴)貴州省30</div><div style="float:left;">    選擇的簡稱：<span id="simple" style="color:red;font-weight:bolder;"></span></div><div style="position:absolute;right:5px;bottom:5px;display:inline;"><input id="Kconfirm" type="button" name="name" value="確定" /><input id="Kcancel" type="button" name="name" value="取消" /></div></div>');var province = $('#province');$('#province .c').css({'font-size':'14px','border-radius': '5px','height': '20px','width': '100px','border': '1px solid rgb(30,113,177)','background-color': 'rgb(219,234,249)','text-align': 'center','line-height': '18px','margin-left': '5px','margin-top': '5px','float': 'left','display': 'inline','cursor': 'pointer'});$('#province .c').hover(function () { $(this).css("background-color", "rgb(30,113,177)") },function () { $(this).css("background-color", "rgb(219,234,249)") });$("#province .c").click(function () {$('#simple').html($(this).attr('v'));inputControl.val($(this).attr('v'));});$("#province #Kconfirm").click(function () {province.css("display", "none");});$("#province #Kcancel").click(function () {inputControl.val('');province.css("display", "none");});}var province = $('#province');province.show();var _top = inputControl.offset().top - $(window).scrollTop();//inputControl[0].offsetTop - $(window).scrollTop();var _left = inputControl.offset().left - $(window).scrollLeft(); //inputControl[0].offsetLeft - $(window).scrollLeft(); province.css("left", inputControl.offset().left + 'px').css("top", inputControl.offset().top + 30 + 'px');var viewWidth = document.documentElement.clientWidth// var viewHeight = document.documentElement.clientHeight;// if ((_left + province.width()) > viewWidth) {//計(jì)算div的offset().leftvar left = (inputControl.offset().left - (_left + province.width() - viewWidth+10)) + 'px';province.css("left", left);}if ((_top + province.height() + 30) > viewHeight) {//計(jì)算div的offset().topvar top = (inputControl.offset().top - province.height() - 10) + 'px';province.css("top", top);}}</script> </head> <body><pre><input id="kk" type="text" name="name" value="" placeholder="請(qǐng)選擇省份簡稱" style="margin-left: 1300px;border:solid red 2px;height:16px;" onfocus="UseKeyTo(this);" /></pre> </body> </html>

轉(zhuǎn)載于:https://www.cnblogs.com/shimily/articles/9716860.html

總結(jié)

以上是生活随笔為你收集整理的js，jquery获取页面元素距离浏览器工作区顶端的距离的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： c++ 读取一行的2个数
下一篇：想拥有一款钢铁侠Jarvis管家的软件吗