圖解JavaScript中的各種寬度高度屬性

原創 constantE 2019-01-27 21:50

第一部分 JavaScript中的寬高屬性

一、與window相關的寬高屬性

1.1 window.location和document.location

  • window對象的location屬性引用的是location對象，表示該窗口中當前顯示文檔的URL
  • document的對象的location屬性也是引用location對象
  • 所以 window.location === document.location //true

    1.2 window.screen

  • window.screen包含有關用戶屏幕的信息。它包括：
    • window.screen.width
    • window.screen.height
    • window.screen.availHeight
    • window.screen.availWidth
    • window.screenTop
    • window.screenLeft

window.screen

1.3 與window相關的寬高

  • window.innerWidth 內部的寬度
  • window.innerHeight 內部的高度
  • window.outWidth 外部的寬度
  • window.outHeight 外部的高度

與window相關的寬高

二、與document相關的寬高屬性

2.1與client相關的寬高

  • document.body.clientWidth 元素寬度（可視內容區+內邊距）
  • document.body.clientHeight元素高度（可視內容區+內邊距）

  • 該屬性指的是元素的可視部分寬度和高度，即padding+content
    如果沒有滾動條，即爲元素設定的寬度和高度
    如果出現滾動條，滾動條會遮蓋元素的寬高，那麼該屬性就是其本來寬高減去滾動條的寬高

    example1：

    1
2
3
4
5
6
7
8
9
10
11

    body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
} 
console.log(document.body.clientWidth);  // 350+padding(80) = 430
console.log(document.body.clientHeight);  // 500 + padding(80) = 580

    example2: 在div中添加文字， 指導出現滾動條

    1
2
3
4
5
6
7
8
9
10
11
12

    #exp2 {
	width:200px;
	height:200px;
	background:red;
	border:1px solid #000;
	overflow:auto;
}

var test = document.getElementById("exp2");

console,log(test.clientHeight); // 200
console.log(test.clientWidth); //

    window7下test.clientWidth

  • 小結clientWidth和clientHeight

    • 無padding無滾動 ： clientWidth = 盒子的width
    • 有padding無滾動 ： clientWidth = 盒子的width + 盒子的padding * 2
    • 有padding有滾動 ： clientWidth = 盒子和width + 盒子的padding * 2- 滾動軸寬度
  • document.body.clientLeft
  • document.body.clientTop

  • 這兩個返回的是元素周圍邊框的厚度，如果不指定一個邊框或者不定位該元素，它的值就是0

    例：

    1
2
3
4
5
6
7
8
9
10
11

    body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
} 
console.log(document.body.clientLeft);  // 20
console.log(document.body.clientTop);  // 20

    小結clientLeft和clientTop

  • 這一對屬性是用來讀取元素的border的寬度和高度的
    • clientTop = border-top
    • clientLeft = border-left

  • 2.2 與offset相關的寬高

  • document.body.offsetWidth（元素的border+padding+content的寬度）
  • document.body.offsetHeight（元素的border+padding+content的高度）

  • 該屬性和其內部的內容是否超出元素大小無關，只和本來設定的border以及width和height有關

    例：

    1
2
3
4
5
6
7
8
9
10
11

    body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
} 
console.log(document.body.offsetWidth);  // 470 = padding*2 + 350 + border*2
console.log(document.body.offsetHeight);  // 620 = padding*2 + 500 + border*2

    小結offsetWidth和offsetHeight

  • 無padding無滾動無border
    • offsetWidth = clientWidth = 盒子的寬度
  • 有padding無滾動有border
    • offsetWidth = 盒子的寬度 + 盒子padding2 + 盒子邊框2 = clientWidth + 邊框寬度*2
  • 有padding有滾動，且滾動是顯示的，有border
    • offsetWidth = 盒子寬度 + 盒子padding2 + 盒子邊框2 = clientWidth + 滾動軸寬度 + 邊框寬度*2
    • document.offsetLeft
    • document.offsetTop

    • 瞭解這兩個屬性我們必須先了解它，什麼是offsetParent

    • 如果當前元素的父級元素沒有進行CSS定位（position爲absolute或relative）,offsetParent爲body.
    • 假如當前元素的父級元素中有CSS定位，offsetParent取最近的那個父級元素

    • offsetLeft的兼容性問題：

    • 在IE6/7中

      • offsetLeft = offsetParent的padding-left + 當前元素的margin-left

    • 在IE8/9/10以及chrome中

      • offsetLeft = offsetParent的margin-left + offsetParent的border寬度 + offsetParent的padding-left + 當前元素的margin-left

    • 在FireFox中

      • offsetLeft = offsetParent的margin-left + 當前元素的margin-left + offsetParent的padding-left

    • 例：

      1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

      body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
} 

#exp {
   width:400px;
   height:200px;
   padding:20px;
   margin:10px;
   background:red;
   border:20px solid #000;
   overflow:auto;
}
var div = document.getElementById("exp");

    • 在IE8/9/10以及chrome中：

      • div.offsetLeft = 本身的margin10 + 父級元素的padding40 + margin10 + border20 = 80
      • div.offsetTop = 本身的margin10 + 父級元素的padding40 + margin10 + border20 = 80

    • 在FireFox：（相比chrome中少了border）

      • div.offsetLeft = 本身的margin10 + 父級元素的padding40 + margin10 = 60
      • div.offsetTop = 本身的margin10 + 父級元素的padding40 + margin10 = 60

    • 在IE6/7中：（相比在FireFox，不但少了border還少了父級元素的margin）

      • div.offsetLeft = 本身的margin10 + 父級元素的padding40 = 50
      • div.offsetTop = 本身的margin10 + 父級元素的padding40 = 50

    • 2.3與scroll相關的寬高 (實際項目中用的最多)

    • document.body.scrollWidth
    • document.body.scrollHeight

    • document.body的scrollWidth和scrollHeight與div的scrollWidth和scrollHeight是有區別的

      例：

      1
2
3
4
5
6
7
8
9
10
11
12

      body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
}

document.body.scrollHeight; // 
document.body.scrollWidth; //

    • 當給定寬高小於瀏覽器窗口的寬高

      • scrollWidth = 通常是瀏覽器窗口的寬度
      • scrollHeight = 通常是瀏覽器窗口的高度

    • 當給定寬高大於瀏覽器窗口的寬高，且內容小於給定寬高的時候

      • scrollWidth = 給定寬度 + 其所有的padding + margin + border
      • scrollHeight = 給定高度 + 其所有的padding + margin + border

    • 當給定寬高大於瀏覽器窗口寬高，且內容大於給定寬高

      • scrollWidth = 內容寬度 + 其所有的padding + margin + border
      • scrollHeight = 內容高度 + 其所有的padding + margin + border

    • 在某div中的scrollWidth和scrollHeight

    • 無滾動軸時：
      • scrollWidth = clientWidth = 盒子寬度 + 盒子padding*2

    • 無滾動軸時

    • 有滾動軸時：
      • scrollWidth = 實際內容的寬度 + padding*2
      • scrollHeight = 實際內容的高度 + padding*2

    • 有滾動軸時

    • document.body.scrollLeft
    • document.body.scrollTop

    • 與前面不同的是，這對屬性是可讀寫的，指的是當元素其中的超出其寬高的時候，元素被捲起來的高度和寬度

      1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

      #exp {
   width:400px;
   height:200px;
   padding:20px;
   margin:10px;
   background:red;
   border:20px solid #000;
   overflow-y:scroll;
}

var mydiv = document.getElementById("exp");

mydiv.scrollTop ;  //默認情況下是0 
mydiv.scrollLeft ; //默認情況下是0 

//可以改寫它

mydiv.scrollTop = 20;
console.log(mydiv.scrollTop)

      scrollTop和scrollLeft

      obj.style.width和obj.style.height

      對於一個DOM元素，它的style屬性返回的是一個對象，這個對象的任意一個屬性是可讀寫的，style.width等於css屬性中的寬度。style.height等於css屬性中的高度

      2.4 documentElement和body的關係

      是父子級的關係

      1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

      body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
}

#exp {
   width:400px;
   height:200px;
   padding:20px;
   margin:10px;
   background:red;
   border:20px solid #000;
   overflow-y:scroll;
}

console.log(document); //document
console.log(document.documentElement); //html
console.log(document.body); //body

      Paste_Image.png

    • 兼容問題推薦使用 獲取瀏覽器窗口可視區域大小
    • 1
2

      document.body.clientWidth || document.documentElement.clientWidth;
document.body.clientHeight || document.documentElement.clientHeight;

      三、Event對象的5種座標

      Event對象的5種座標

      例：

      1
2

      <div id="example" 
style="width: 200px;height: 200px;background: red;margin: 100px auto;"></div>

      1
2
3
4
5
6
7
8

      var example = document.getElementById("example");
example.onclick = function(e){
	console.log("clientX "+e.clientX + " : " + " clientY "+e.clientY);
	console.log("screenX "+e.screenX + " : " + " screenY "+e.screenY);
	console.log("offsetX "+e.offsetX + " : " + " offsetY "+e.offsetY);
	console.log("pageX "+e.pageX + " : " + " pageY "+e.pageY);
	console.log("x "+e.x + " : " + " y "+e.y);
}

      Event對象的5種座標

      四、 js各種寬高的應用

    • example1：可視區域加載

    • 用來解決offset的兼容性難問題

      1

      <div id="example1" ></div>

      1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

      #example1 {
			width: 500px;
			height: 350px;
			background: red;
			margin: 1000px auto 0 auto;
		}
		@-webkit-keyframes fadeInLeft{
			0%{
				opacity: 0;
				transform: translate3d(-100%,0,0);
			}
			100%{
				opacity: 1;
				transform: none;
				
			}
		}
			.fadeInLeft {
				animation-name: fadeInLeft;
				animation-duration: 2s;
			}

      1
2
3
4
5
6
7
8
9
10
11
12

      function showDiv(){
			var example = document.getElementById("example");
			var clients = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;//可視區域的高度
			var divTop = example.getBoundingClientRect().top;
			if(divTop <= clients){
				example.classList.add("fadeInLeft");
                              //  這裏可以通過setAttribute設置圖片的src按需加載
			}
			document.title = clients+"---"+divTop;
		}
		
window.onscroll = showDiv;

      在線演示

    • example2：網頁滾動到頂部或者底部
    • 1

      <div id="example2" ></div>

      1
2
3
4
5
6

      #example2 {
			width: 500px;
			height: 350px;
			background: red;
			margin: 1000px auto 0 auto;
}

      1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

      function scrollTopOrBottom(){
			var example2 = document.getElementById("example");
			var clients = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;//可視區域的高度，兼容性寫法
			var scrollTop = document.body.scrollTop;
			var wholeHeight = document.body.scrollHeight;
			if(clients + scrollTop >= wholeHeight){
				alert("我已經到了底部!");
                              // 這裏可以調用Ajax分頁加載到頁面中，實現多頁加載功能
			}else if(scrollTop == 0){
				alert("我已經到了頂部了!");
                      
			}
			document.title = (clients + scrollTop)+"---"+wholeHeight+"--"+scrollTop;
		}
		
window.onscroll = scrollTopOrBottom;

      在線演示

    • example3：DIV滾動到底部加載
    • 1
2
3
4
5
6
7
8

      <div id="example3" >
			DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載
			DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載
			DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載
			DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載
			DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載
			DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載
</div>

      1
2
3
4
5
6
7
8

      #example3 {
			width: 500px;
			height: 400px;
			background: red;
			margin: 10px auto;
			padding: 10px;
			overflow-y: scroll;
}

      1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

      var div = document.getElementById("example3");
		function divScroll(){
			
			var wholeHeight = div.scrollHeight;//滾動區域高度
			var divScrollTop = div.scrollTop;//捲上去的那部分高度
			var divHeight = div.clientHeight; //div的可視區域的高度
			
			
			if(divScrollTop + divHeight >= wholeHeight){
				alert("我已經到了底部!");
               // 這裏可以在div中通過滾動加載分頁按需顯示
			}else if(divScrollTop == 0){
				alert("我已經到了頂部了!");
			}
			document.title = (divScrollTop + divHeight)+"---"+wholeHeight+"--"+divScrollTop;
}
		
div.onscroll = divScroll;

      在線演示

    • example4：計算滾動軸的寬度
    • 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

      //獲取滾動軸的寬度
	function getScrollBar(){
		var el = document.createElement("p");
		var styles = {
			width:"100px",
			height:"100px",
			overflowY:"scroll"
		};
		for (var prop in styles){
			el.style[prop] = styles[prop];//把 styles上的屬性全部遍歷拷貝到el.style上
			
		}
		document.body.appendChild(el);
		var scrollBarWidth = el.offsetWidth - el.clientWidth;
		el.remove();
		return scrollBarWidth;
	}
	alert(getScrollBar());//17

      在線演示

      五、js中的寬高屬性總結

      Paste_Image.png

      document相關的寬高

       

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

一款基於C#開發的通訊調試工具（支持Modbus RTU、MQTT調試）

前言 今天大姚給大家分享一款基於C#、WPF、Prism、MaterialDesign、HandyControl開發的通訊調試工具（支持Modbus RTU、MQTT調試，界面色彩豐富）：Wu.CommTool。 工具特點 工具界面色彩豐

追逐時光 2024-05-19 14:21:58

Linux/Golang/glibC系統調用

Linux/Golang/glibC系統調用 本文主要通過分析Linux環境下Golang的系統調用，以此闡明整個流程 有時候涉略過多，反而遭到質疑~，寫點文章證明自己實力也好 Golang系統調用 找個函數來分析 https://pk

藍天上的雲℡ 2024-05-19 14:21:17

讓python代碼找到文件路徑的最好方法

也就是算出絕對路徑傳進去. import os wenjian='/'.join(os.path.abspath(__file__).split('/')[:-2])+'/' with open(wenjian+"meddata.jso

張博的博客 2024-05-19 14:19:47

Python 潮流週刊#51：用 Python 繪製美觀的圖表

本週刊由 Python貓 出品，精心篩選國內外的 250+ 信息源，爲你挑選最值得分享的文章、教程、開源項目、軟件工具、播客和視頻、熱門話題等內容。願景：幫助所有讀者精進 Python 技術，並增長職業和副業的收入。 本期週刊分享了 12

豌豆花下貓 2024-05-19 14:19:07

MASM中的向前引用（Forward Reference）

  當程序需要引用尚未定義的變量或標號時，編譯器會如何處理呢，這就涉及到向前引用（Forward Reference）的概念。   一、Forward Reference的概念   程序引用到之前尚未定義的變量(Variable)、標號(L

美洲象 2024-05-19 14:11:37

[MASM拾遺]Offset僞指令

  Offset僞指令我一直都認爲只是獲取標識符在段中的偏移地址，但經研究，發現了部分違反直覺的細微區別：   1、在完整端聲明(Full segment definition)的模式下   如果offset mygroup:myvar或o

美洲象 2024-05-19 14:11:37

【Python】強化學習SARSA走迷宮

之前有實現Q-Learning走迷宮，本篇實現SARSA走迷宮。 Q-Learning是一種off-policy算法，當前步採取的決策action不直接作用於環境生成下一次state，而是選擇最優的獎勵來更新Q表。 更新公式： SARSA

Dsp Tian 2024-05-19 14:11:07

h28 HTML Javascript

A script is a small piece of program that can add interactivity to our websites. For example, a script could generate a

emanlee 2024-05-19 14:10:26

h29 HTML Layouts

  The HTML Layouts specifies the arrangement of components on an HTML web page. A good layout structure of the webpage i

emanlee 2024-05-19 14:10:26

h27 HTML Adding Favicon

  What is a HTML Favicon? A favicon is a small image that represents your website and helps users identify it among mult

emanlee 2024-05-19 14:10:26

h30 HTML Layout Elements

  The Layout Elements of HTML In HTML, there are various semantic elements that are used to define different parts of a

emanlee 2024-05-19 14:10:26

h31 HTML Layout using CSS

  Now we all have learned various techniques to design an HTML layout including tables and semantic elements. We are ver

emanlee 2024-05-19 14:10:26

CSS Cascading Style Sheet

cs01 CSS Syntax cs02 CSS Selectors cs03 CSS Inclusion cs04 CSS Measurement Units cs05 CSS Paddings Property     REF http

emanlee 2024-05-19 14:10:26

cs04 CSS Measurement Units

Values and units, in CSS, are significant as they determine the size, proportions, and positioning of elements on a web

emanlee 2024-05-19 14:10:26

cs01 CSS Syntax

A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in you

emanlee 2024-05-19 14:10:26