JavaScript DOM元素尺寸與位置_基礎知識
一 取得元素的CSS大小
1.透過style內聯取得元素的大小
var box = document.getElementById('box'); // 取得元素;
box.style.width; 地 box.style.height; ///200px;
2.透過計算取得元素的大小
style.width;
// PS:透過計算取得元素的大小,無關是行內/內聯或連結,它傳回經過計算後的結果;
3.透過CSSStyleSheet物件中的cssRules(或rules)屬性取得元素的大小;
rule.style.width;
PS:cssRules只能取得到內聯和連結樣式的寬和高,不能取得到行內和計算後的樣式;
總結:以上三種CSS取得元素大小的方法,只能取得元素的CSS大小,卻無法取得元素本身實際的大小;例如加上內邊距/捲軸之類的;
二 取得元素實際大小
1.clientWidth和clientHeight
這組屬性可以取得元素視覺區的大小,包含元素內容及內邊距所佔據的空間大小;
box.clientWidth;
PS:回傳了元素大小,但沒有單位,預設單位是px;
PS:對於元素的實際大小,clientWidth和clientHeight理解如下:
1.元素增加邊框,無變化,200;
2.元素增加外邊框,無變化,200;
3.增加捲軸,最終值=原本大小-捲軸大小;184;
4.增加內邊距,最終值=原本大小 內邊距大小;220;
PS:如果沒有設定任何CSS的width和height,那麼非IE會算上滾動條和內邊距的計算後的大小;而IE則回傳0;
2.scrollWidth和scrollHeight
這組屬性可以取得沒有捲軸的情況下,元素內容的總高度;
box.scrollWidth;
// PS:回傳了元素大小,預設單位是px;如果沒有設定任何CSS的width和height,它會得到計算後的寬度和高度;
3.offsetWidth和offsetHeight
這組屬性可以傳回元素實際大小,包含邊框/內邊距和捲軸;
box.offsetWidth;
PS:回傳了元素大小,預設單位是px;如果沒有設定任何CSS的width和height,它會得到計算後的寬度和高度;
PS:對於元素的實際大小,理解如下:
1.增加邊框,最終值=原本大小 邊框大小;220;
2.增加內邊距,最終值=原本大小 內邊距大小;220;
3.增加外邊據,無變化;
4.增加捲軸,無變化,不會減少;
PS:對於元素大小的取得,一般是區塊級(block)元素且已設定了CSS大小的元素較為方便;
1.clientLeft和clientTop
// 這組屬性可以取得元素設定了左邊框和上邊框的大小;
box.clientLeft;
2.offsetLeft和offsetTop(偏移量)
// 这组属性可以获取当前元素边框相对于父元素边框的位置;
box.offsetLeft; // 50;
// PS:获取元素当前相对于父元素的位置,最好将它设置为定位position:absolute;
// PS:加上边框和内边距不会影响它的位置,但加上外边据会累加;
box.offsetParent; // 得到父元素;
// PS:offsetParent中,如果本身父元素是<body>,非IE返回body对象,IE返回html对象;
// 如果两个元素嵌套,如果上级父元素没有使用定位position:absolute,那么offsetParent将返回body或html对象;
// 如果说在很多层次里,外层已经定位,获取任意一个元素距离页面上的位置,可以不停的向上回溯获取累加来实现;
box.offsetTop+box.offsetParent.offsetTop; // 只有两层的情况下;
// 如果多层的话,就必须使用循环或递归;
function offsetLeft(element){
var left = element.offsetLeft; // 得到第一层距离;
var parent = element.offsetParent; // 得到第一个父元素;
while(parent !== null){ // 判断如果还有上一层父元素;
left += parent.offsetLeft; // 将得到的距离累加;
parent = parent.offsetParent; // 将父元素也回溯;
} // 然后循环;
return left; // 得到最终距离;
}
// 这组属性可以获取被滚动条隐藏的区域大小,也可设置定位到该区域;
box.scrollTop; // 获取滚动内容上方的位置;
// 设置滚动条滚动到最初始的位置;
function scrollStart(element){
if(element.scrollTop != 0){
element.scrollTop = 0;
}
}
// 这个方法返回一个矩形对象,包含四个属性:left/top/right和bottom;
// 分别表示元素各边与页面上边和左边的距离;
var box = document.getElementById('box');
alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离;
alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离;
alert(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离;
alert(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离;
// PS:IE/Firefox/Opera/Chrome/Safari都支持;
// 但在IE中,默认坐标从(2,2)开始计算,导致最终距离比其他浏览器多出两个像素;
document.documentElement.clientTop; // 非IE为0,IE为2;
document.documentElement.clientLeft; // 非IE为0,IE为2;
// 兼容getBoundingClientRect()
function getRect(element){
var rect = element.getBoundingClientRect();
var top = document.documentElement.clientTop;
var left = document.documentElement.clientLeft;
return {
top:rect.top-top, // 元素上边距-页面的上边距(0-0或2-2);
bottom:rect.bottom-top,
left:rect.left-left, // 元素左边距-页面的左边距(0-0或2-2);
right:rect.right-left
}
};1.偏移量(offset dimension):包括元素在螢幕上所佔用的所有可見的空間; 元素的可見大小由其高度和寬度決定,包括內邊距/捲軸和邊框;
2.客戶區大小(client dimension):指的是元素內容及其內邊距所佔據的空間大小;
3.滾動大小(scroll dimension):包含滾動內容的元素的大小;
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
7649
15
1392
52
91
11
73
19
36
110
詳細介紹如何在Windows 11上開啟環境變數設定
Dec 30, 2023 pm 06:07 PM
環境變數功能是系統中的配置程式運行必備工具，但是在最新的win11系統中還有許多的用戶不知道怎麼設置打開，下面就給你們帶來了win11環境變量打開位置詳細介紹，快來一起學習操作一下吧。 win11環境變數在哪：1、先輸入“win+R”，開啟運行框。 2、然後在裡面輸入指令：controlsystem。 3.在開啟的系統資訊介面中，選擇左側選單的「進階系統設定」。 4.隨後在開啟的「系統屬性」視窗選擇下方的「環境變數」選項。 5.最後在開啟的環境變數中，即可依照需求進行相關的設定。
Win11的啟動路徑以及如何開啟它
Jan 03, 2024 pm 11:13 PM
每個Windows系統都有一個啟動路徑，如果你在其中新增了檔案或軟體，就會在開機的時候打開它。不過不少朋友不知道win11啟動路徑在哪裡，其實我們只要進入C碟的對應資料夾就可以了。 win11啟動路徑：1、雙擊開啟「此電腦」2、直接將此路徑「C:\ProgramData\Microsoft\Windows\StartMenu\Programs\Startup」貼進路徑方塊。 3.這裡就是win11啟動路徑了，如果我們要開機開啟檔案就可以將檔案放進來。 4.如果你根據這條路徑進不來，可能是被隱藏了。
windows10憑證管理員在哪裡
Jul 09, 2023 am 10:09 AM
憑證管理器是使用者用來管理web憑證和Windows憑證的作用，但很多使用者還不清楚windows10憑證管理器在哪裡。其實憑證管理器就在操作面板上，大家在打開控制面板以後記得將查看方法改成小圖標，那樣就能見到憑證管理器了，點擊查看就能查看各類信息了，如果想要查看大量，就需要輸入帳戶密碼。 windows10憑證管理員在哪裡：1、在系統中開啟控制台，點選右上角的檢視方法，將類型轉換成小圖示。 2.以小圖示的方式查看以後，點選「憑證管理員」。 3.進來憑證管理器以後，能夠看見有關作用的介紹，主要用於
星穹鐵道克勞克影視樂園摺紙小鳥位置
Mar 27, 2024 pm 11:51 PM
星穹鐵道克勞克影視樂園總共有20隻摺紙小鳥，有很多玩家不知道克勞克影視樂園摺紙小鳥在哪，小編已經把每隻摺紙小鳥位置全部都總結出來了，幫助大家進行尋找，具體內容一起來看看這篇克勞克影視樂園摺紙小鳥位置最新匯總。崩壞星穹鐵道攻略大全星穹鐵道克勞克影視樂園摺紙小鳥位置1、克勞克影視樂園一層2、克勞克影視樂園二層
了解pip安裝包儲存的位置和結構
Jan 18, 2024 am 08:23 AM
深入了解pip安裝的套件存放位置，需要具體程式碼範例pip是Python語言常用的套件管理工具，用於方便安裝、升級和管理Python套件。在使用pip安裝套件時，它會自動從PyPI（Python套件索引）下載對應的套件文件，並將其安裝到指定的位置。那麼，pip安裝的套件究竟存放在哪裡呢？這是很多Python開發者都會遇到的問題。本文將深入探討pip安裝的套件存放位置，並提供
win11關機位置
Jan 10, 2024 am 09:14 AM
如果我們要長時間離開電腦，那麼最好將電腦關機保護它，那麼win11關機在哪裡呢，其實一般來說只要打開開始選單，在其中就可以找到關機按鈕了。 win11關機在哪裡：答：在開始功能表的電源按鈕。 1.首先我們點選底部工作列的「windows標誌」開啟「開始功能表」2、開啟後，可以在右下角找到「電源」按鈕，如圖所示。 3.點擊電源按鈕後，就能看到「關機」了，點擊它就能關機。 4.如果因為當機等特殊狀況無法關機，那麼可以直接用電腦上的「電源鍵」長按強制關機。
使用Apple的簽入功能：iOS 17中的訊息應用程式指南
Sep 14, 2023 pm 09:13 PM
iOS17中的Apple在「資訊」中添加了一項新功能，可讓您在安全回家時讓親人知道。它被稱為簽入，這是你如何使用它。無論你是在天黑後步行回家，還是在清晨跑步，你都可以在Apple的「資訊」應用程式中與家人或朋友一起開始簽到，讓他們知道你何時安全回家。在您到達後，CheckIn會自動偵測您何時在家，並通知您的朋友。當他們收到警報並且簽入已結束時，您也會收到通知。如果發生意外情況並且您在途中被延誤，CheckTab甚至會識別出您沒有取得進展並與您一起辦理登機手續，詢問您是否要增加預計到達時間。如果您沒有
快手發佈於哪裡怎麼改位置？已經上傳的影片怎麼加入位置？
Mar 21, 2024 pm 06:00 PM
作為國內知名的短影片平台，快手為許多創作者提供了展現才華和分享生活的機會。在上傳影片時，一些新手創作者可能會困惑於如何更改影片發布位置。本文將為您介紹快手影片發布位置的更改方法，並分享一些快手影片發布的技巧，幫助您更好地利用這個平台展示自己的作品。一、快手發佈於哪裡怎麼改位置？ 1.發布介面：在快手APP中，點選「發布」按鈕，進入影片發佈介面。 2.位置資訊：在發佈介面，有「位置」欄，點選進入位置選擇介面。 3.更改位置：在位置選擇介面，點選「定位」按鈕，可以查看目前所在位置。如需更改位置，點擊「位
