使用JavaScript和JQUERY怎么獲取元素的寬、高和位置？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

在江津等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站建設(shè)、做網(wǎng)站 網(wǎng)站設(shè)計(jì)制作定制網(wǎng)站開(kāi)發(fā),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站制作,營(yíng)銷型網(wǎng)站,成都外貿(mào)網(wǎng)站制作,江津網(wǎng)站建設(shè)費(fèi)用合理。

JavaScript可以做什么

1.可以使網(wǎng)頁(yè)具有交互性，例如響應(yīng)用戶點(diǎn)擊，給用戶提供更好的體驗(yàn)。 2.可以處理表單，檢驗(yàn)用戶的輸入，并提供及時(shí)反饋節(jié)省用戶時(shí)間。 3.可以根據(jù)用戶的操作，動(dòng)態(tài)的創(chuàng)建頁(yè)面。 4使用JavaScript可以通過(guò)設(shè)置cookie存儲(chǔ)在瀏覽器上的一些臨時(shí)信息。

javascript中

ele.getBoundingClientRect()：獲取一個(gè)元素相對(duì)于瀏覽器視口的的坐標(biāo)（無(wú)論父元素定位與否），返回一個(gè)Object對(duì)象，該對(duì)象有6個(gè)屬性：top/left/right/bottom/width/height。幾乎所有瀏覽器都支持該方法。jQuery中沒(méi)有直接的方法，需要用$(ele).offset().top-$(document).scrollTop()計(jì)算得到。

注意：right是指元素右邊界距窗口最左邊的距離，bottom是指元素下邊界距窗口最上面的距離。

pageYOffset 屬性是scrollY屬性的別名，設(shè)置或返回文檔在垂直方向滾動(dòng)的像素值。window.pageYOffset == window.scrollY;前者瀏覽器兼容性更好。

所以獲取元素在頁(yè)面文檔中的位置：

var X= ele.getBoundingClientRect().left+scrollTop;

var Y =ele.getBoundingClientRect().top+scrollTop;
//在窗口的位置+文檔滾動(dòng)掉的尺寸

為了跨瀏覽器兼容，文檔卷掉的長(zhǎng)度請(qǐng)使用如下方式：

varscrollTop= document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

jQuery中

1.鼠標(biāo)相對(duì)于頁(yè)面的位置

event.pageX/event.pageY：鼠標(biāo)相對(duì)于頁(yè)面左/上邊緣的距離。

2.元素的位置偏移量

offset()：返回包含top和left兩個(gè)屬性的對(duì)象，相對(duì)于document文檔的坐標(biāo)。

position()：返回包含top和left兩個(gè)屬性的對(duì)象，相對(duì)于最近的已定位的包含元素的位置。若無(wú)，則相對(duì)于document。只對(duì)可見(jiàn)元素有效，注意ele{visibility：hidden}也屬于可見(jiàn)元素。

3.元素的寬高

width()/height()：獲得或設(shè)置元素【內(nèi)容】的寬/高；若元素的display：none，其值為0。

innerWidth()/innerHeight()：獲得包括內(nèi)邊距（padding）的元素寬度/高度，不包括邊框；

outerWidth()/outerHeight()：獲得包括內(nèi)邊距(padding)和邊框(border)的元素寬度/高度；

outerWidth(true)/outerHeight(true)：獲得整個(gè)元素的寬度/高度，包括外邊距、邊框、內(nèi)邊距和內(nèi)容；

注意：

1）ele.css("height")：返回帶有完整單位的字符串（例如400px），若運(yùn)算需要parseInt轉(zhuǎn)換。ele.height()：返回一個(gè)沒(méi)有單位的number數(shù)值（例如400）。

2）height()總是返回內(nèi)容寬度，不管CSS box-sizing屬性值。若CSS box-sizing為border-box，將造成這個(gè)函數(shù)改變這個(gè)容器的outerHeight，而不僅是原來(lái)的內(nèi)容高度。

4.瀏覽器相關(guān)寬高

$(window).height()：獲取瀏覽器可視窗口的高度；

$(document).height()：獲取整個(gè)網(wǎng)頁(yè)文檔的高度；當(dāng)網(wǎng)頁(yè)高度不足瀏覽器窗口時(shí)，返回的是$(window).height()。

$(document).scrollTop()：document元素相對(duì)document元素對(duì)應(yīng)的滾動(dòng)條頂部的垂直偏移量，可獲取已滾動(dòng)的距離或設(shè)置將要滾動(dòng)的距離。

即：當(dāng)網(wǎng)頁(yè)滾動(dòng)條拉到最低端時(shí)，$(document).height() == $(window).height() + $(window).scrollTop()。

注意：不建議使用$("html").height()、$("body").height()這樣的方法獲取高度，原因有：

$("body").height()：body可能會(huì)有邊框，獲取的高度會(huì)比$(document).height()小；

$("html").height()：在不同的瀏覽器上獲取的高度會(huì)有差異，瀏覽器不兼容。

$(window).height()若返回的不是瀏覽器窗口的高度，可能是網(wǎng)頁(yè)沒(méi)有加上<!DOCTYPE>聲明。

關(guān)于使用JavaScript和JQUERY怎么獲取元素的寬、高和位置問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站chinadenli.net，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

分享題目：使用JavaScript和JQUERY怎么獲取元素的寬、高和位置-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://chinadenli.net/article22/dhcicc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)公司、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)