當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2025/3/20 HTML 31 豆豆

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

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

?網頁被卷起來的高度/寬度（即瀏覽器滾動條滾動后隱藏的頁面內容高度）

(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()

?網頁工作區域的高度和寬度?

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

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

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

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

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

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

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

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

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

即：

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

舉個應用例子：(個人習慣用jqurey，免去兼容性煩惱)

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

可見不管輸入框在哪里，提示框信息永遠都顯示在正確的位置，而不會在彈出提示框時候被擋住

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="蒙">(蒙)內蒙古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="新">(新)新疆區22</div><div class="c" v="陜">(陜)陜西省23</div><div class="c" v="甘">(甘)甘肅省24</div><div class="c" v="寧">(寧)寧夏區25</div><div class="c" v="青">(青)青海省26</div><div class="c" v="川">(川)四川省27</div><div class="c" v="藏">(藏)西藏區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) {//計算div的offset().leftvar left = (inputControl.offset().left - (_left + province.width() - viewWidth+10)) + 'px';province.css("left", left);}if ((_top + province.height() + 30) > viewHeight) {//計算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="請選擇省份簡稱" style="margin-left: 1300px;border:solid red 2px;height:16px;" onfocus="UseKeyTo(this);" /></pre> </body> </html>

轉載于:https://www.cnblogs.com/shimily/articles/9716860.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

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