clientWidth clientHeight scrollWidth scrollHeight offsetWidth offsetHieght的區別

2024-07-11 08:23:07

字體：大中小

來源：轉載

供稿：網友

clientWidth:元素內容區的寬度加上左右padding的值，如果有滾動條，不包括滾動條的寬度

clientHieght: 元素內容區的高度加上上下padding的值，如果有滾動條，不包括滾動條的高度

clientLeft:元素左邊框的寬度，如果沒有邊框，就是0

clientTop:元素上邊框的寬度，如果沒有邊框，就是0

scrollWidth:元素的滾動寬度，不包括元素邊框和滾動條寬度，即元素邊框和滾動條之間的寬度加上延伸到元素外面的部分

scrollHeight:元素的滾動高度，不包括元素的邊框盒滾動條寬度，即即元素邊框和滾動條之間的高度加上延伸到元素外面的部分

scrollLeft:元素水平滾動的距離

scrollTop: 元素垂直滾動的距離

offsetWidth:元素從左邊框到右邊框的寬度

offsetHeight: 元素從上邊框到下邊框的高度

offsetLeft:元素到offsetParent的偏移量

offsetTop: 元素到offsetParent的偏移量

(關于offsetParent offsetLeft offsetTop請參閱《元素的offsetParent offsetLeft offsetTop屬性》)

另外，FF中的window屬性innerWidth innerHeight只的是顯示文檔的整個視窗的寬度和高度(即瀏覽器中除了工具欄，菜單欄，地址欄以外的部分)，而outerWidth outerHeight指的是整個瀏覽器窗口的寬度和高度，即文檔視窗高度和寬度 + 工具欄，地址欄，菜單欄這些部分

以上的結論是通過下面測試代碼得出：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> <head> <title>測試三</title> <script type = "text/javascript" src = "myUtil.js"></script> <script type = "text/javascript"> function test() { myUtil.addEvent("div2", "scroll", function() {//綁定滾動事件 display(); }); display(); } function display() { var div1 = myUtil.byId("div1");//獲取金色背景div框的引用 var str1 = getAll(div1);//獲取div1的相關屬性字符串 var div2 = myUtil.byId("div2");//獲取銀色背景的引用 var str2 = getAll(div2); //獲取div2的相關屬性字符串 var div3 = myUtil.byId("div3"); //獲取顯示框的引用 div3.innerHTML = ""; div3.innerHTML = "div1:<br />" + str1 + "div2:<br/>" + str2; //顯示 } function getAll(element) { var str = ""; var clientWidth = element.clientWidth; var clientHeight = element.clientHeight; var clientLeft = element.clientLeft; var clientTop = element.clientTop; var scrollWidth = element.scrollWidth; var scrollHeight = element.scrollHeight; var scrollLeft = element.scrollLeft; var scrollTop = element.scrollTop; var offsetWidth = element.offsetWidth; var offsetHeight = element.offsetHeight; var offsetLeft = element.offsetLeft; var offsetTop = element.offsetTop; str += "clientWidth: " + clientWidth + " clientHeight: " + clientHeight + " clientLeft: " + clientLeft + " clientTop: " + clientTop + "<br />" + "scrollWidth: " + scrollWidth + " scrollHeight: " + scrollHeight + " scrollLeft: " + scrollLeft + " scrollTop: " + scrollTop + "<br />" + "offsetWidth: " + offsetWidth + " offsetHeight: " + offsetHeight + " offsetLeft: " + offsetLeft + " offsetTop: " + offsetTop + "<br />" return str; } </script> <style type = "text/css"> html { margin: 0; border:3px solid red; padding: 0; } /*body的邊框為橙色*/ body { padding: 20px; margin: 20px; border: 1px solid orange; } /*藍色邊框div*/ #wrapper { padding: 20px; margin: 0; border: 1px solid blue; width: 700px; } /*紅色邊框，金色背景div*/ #div1 { border: 3px solid red; padding: 20px; margin: 20px; width: 100px; height: 100px; background: gold; } /*綠色邊框，銀色背景div*/ #div2 { background: silver; width: 200px; height: 200px; overflow: scroll; padding: 20px; border: 1px solid green; margin-bottom: 20px; } /*藍色背景div，是銀色div的子框*/ #div2_1 { background: blue; width: 400px; height: 400px; } /*黑色邊框div，用來顯示*/ #div3 { border: 1px solid; width: 600px; height: 150px; } </style> </head> <body onload = "test()"> <div id = "wrapper"> <div id = "div1"></div> <div id = "div2"><div id = "div2_1"></div></div> <div id = "div3"></div> </div> </body></html>

測試頁面如圖: