1.常見屬性
1 客戶寬高 clientWidth clientHeight //元素自身寬高+padding-滾動條 2 偏移寬高 offsetWidth offsetHeight //width+padding+border 實際占位的大小 3 滾動條寬高 scrollWidth scrollHeight //滾動條寬高
2.獲取位置
1 clientLeft clientTop //客戶坐標 2 offsetLeft offsetTop // 相對父元素的定位 //比如left:100,top:100,就是這個值 3 4 當內部內容大于外部元素高度時,寫入overflow:auto,就會產生滾動條,在所溢位去的就是滾動條 5 * 滾動條事件: div5.onscroll=function(){ 6 console.log(div5.scrollLeft,div5.scrollTop); 7 } 8 div5.getBoundingClientRect(); //獲取元素范圍矩形 其中包括距離視口的距離，已經元素的寬高，還有left，top，bottom，right
3.獲取可視寬高,獲取HTML的寬高(一屏高度)
1 document.documentElement //列印結果就是HTML 2 下面這個結果就是可視高度,也就可以理解為一屏的高度; 3 document.documentElement.clientWidth , document.documentElement.clientHeight 4 //視窗寬-滾動條寬(可視區域寬度),高度時可視區域
4.整個檔案所占的高度
1 document.body.scrollHeight;即若檔案高度大于一屏,則右側有滾動條;
5.滾動條位置
1 scrollLeft scrollTop //可以修改 滾動條坐標 2 document.documentElement.scrollTop;// 獲取滾動條位置,對應的是HTML標簽,一般使用這個 3 document.body.scrollTop; //對應的是body標簽,
6.獲取body寬高
1 document.body.clientWidth,document.body.clientHeight //視窗寬度-滾動條-body的margin*2,高度就是實際內容的高度;
7.document.documentElement.offsetWidth
1 document.documentElement.offsetWidth,document.documentElement.offsetHeight) ; //視窗寬-滾動條寬 高度是實際內容高度
2 document.body.offsetWidth,document.body.offsetHeight); //html的offset寬高-body的margin*2
8.附件 決議圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/433364.html
標籤：JavaScript