欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

教你如何通過JavaScript讀取元素的樣式

 更新時間：2022年01月21日 10:02:10   作者：哪?吒  
這篇文章主要給大家介紹了關(guān)于如何通過JavaScript讀取元素的樣式,文中通過實例代碼以及圖文介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

一、getComputedStyle()

1、getComputedStyle()是window的方法，可以獲取元素當前的樣式

Window.getComputedStyle()方法返回一個對象，該對象在應(yīng)用活動樣式表并解析這些值可能包含的任何基本計算后報告元素的所有CSS屬性的值。 私有的CSS屬性值可以通過對象提供的API或通過簡單地使用CSS屬性名稱進行索引來訪問。

語法

let style = window.getComputedStyle(element, [pseudoElt]);

2、兩個參數(shù)

要獲取樣式的元素

可以傳遞一個偽元素，一般都傳null
該方法會返回一個對象，對象中封裝了當前元素對應(yīng)的樣式，可以通過對象樣式名來讀取樣式，如果獲取的樣式?jīng)]有設(shè)置，則會獲取到真實的值，而不是默認值。

3、代碼實例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				width: 120px;
				height: 120px;
				background-color: red;
			}
			
		</style>
		
		<script type="text/javascript">
		
			window.onload = function(){
				
				//點擊按鈕以后讀取box1的樣式
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					
					var obj = getComputedStyle(box1,null);
					
					alert(getComputedStyle(box1,null).width);

				};
			};
		</script>
	</head>
	<body>
		<button id="btn01">戳我一下</button>
		<br /><br />
		<div id="box1" ></div>
	</body>
</html>

4、瀏覽器效果

備注：IE無效

二、定義一個方法獲取元素信息

1、代碼實例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				width: 120px;
				height: 120px;
				background-color: red;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				//點擊按鈕以后讀取box1的樣式
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					// 定義一個函數(shù)，用來獲取指定元素的當前的樣式
					var ret = getBoxStyle(box1,"width");
					alert(ret);
				};
				
			};
			
			/*
			 * 參數(shù)：
			 * obj 要獲取樣式的元素
			 * name 要獲取的樣式名
			 */
			function getBoxStyle(obj , name){
				
				if(window.getComputedStyle){
					//谷歌/edge瀏覽器，具有g(shù)etComputedStyle()方法
					return getComputedStyle(obj , null)[name];
				}else{
					//IE沒有g(shù)etComputedStyle()方法，下面為IE8的方式
					return obj.currentStyle[name];
				}
			}
		</script>
	</head>
	<body>
		<button id="btn01">戳我一下</button>
		<br /><br />
		<div id="box1" ></div>
	</body>
</html>

2、瀏覽器顯示

三、clientWidth和clientHeight

1、這兩個元素是獲取元素的寬度和高度，不帶px

 

2、這兩個元素是只讀的，不可修改

 

3、代碼實例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				width: 120px;
				height: 150px;
				background-color: red;
			}
			
		</style>
		<script type="text/javascript">
			
			window.onload = function(){
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				
				btn01.onclick = function(){
					alert(box1.clientWidth);
					alert(box1.clientHeight);
				};
			};
		</script>
	</head>
	<body id="body">
		<button id="btn01">親我一下</button>
		<div id="box1"></div>
	</body>
</html>

4、瀏覽器展示

四、offsetWidth和offsetHeight

1、獲取元素的整個的寬度和高度，包括內(nèi)容區(qū)、內(nèi)邊距和邊框

 

2、代碼實例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				padding: 10px;
				border: 10px solid yellow;
			}
		</style>
		<script type="text/javascript">
			
			window.onload = function(){
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				
				btn01.onclick = function(){
					/*
					 * offsetWidth
					 * offsetHeight
					 * 	- 獲取元素的整個的寬度和高度，包括內(nèi)容區(qū)、內(nèi)邊距和邊框
					 */
					alert(box1.offsetWidth);
				};
			};
		</script>
	</head>
	<body id="body">
		<button id="btn01">親我一下</button>
		<br /><br />
		<div id="box1"></div>
	</body>
</html>

3、瀏覽器展示

五、offsetParent

1、獲取當前元素的父元素

 

2、代碼實例

 var op = box1.offsetParent;
 alert(op.id);

3、瀏覽器展示

六、offsetLeft和offsetTop

1、offsetLeft

當前元素相對于其定位父元素的水平偏移量

2、offsetTop

當前元素相對于其定位父元素的垂直偏移量

七、scrollWidth和scrollHeight

1、scrollWidth

可以獲取元素整個滾動區(qū)域的寬度

2、scrollHeight

可以獲取元素整個滾動區(qū)域的高度

八、scrollLeft和scrollTop

1、scrollLeft

獲取水平滾動條滾動的距離

2、scrollTop

獲取垂直滾動條滾動的距離

當滿足scrollHeight - scrollTop == clientHeight，說明垂直滾動條滾動到底了。

當滿足scrollWidth - scrollLeft == clientWidth，說明水平滾動條滾動到底了。

九、 事件的冒泡

1、 事件的冒泡指的是事件的向上傳遞，當后代元素的事件被觸發(fā)時，其父元素的相同事件也會被觸發(fā)。

 

2、可以通過設(shè)置，取消事件的冒泡

 

3、代碼實例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#nz{
				width: 200px;
				height: 100px;
				background-color: rgb(205, 112, 50);
			}
			
			#yy{
				background-color: yellow;
			}
			
			
		</style>
		<script type="text/javascript">
			
			window.onload = function(){
				//為云韻綁定一個單擊響應(yīng)函數(shù)
				var yy = document.getElementById("yy");
				yy.onclick = function(event){
					event = event || window.event;

					alert("我是云韻");
					
					//取消冒泡
					//可以將事件對象的cancelBubble設(shè)置為true，即可取消冒泡
					//event.cancelBubble = true;
				};
				
				//為哪吒綁定一個單擊響應(yīng)函數(shù)
				var nz = document.getElementById("nz");
				nz.onclick = function(event){
					event = event || window.event;
					
					alert("我是哪吒");
					
					event.cancelBubble = true;
				};
				
				//為body綁定一個單擊響應(yīng)函數(shù)
				document.body.onclick = function(){
					alert("我是body的單擊響應(yīng)函數(shù)");
				};		
			};
		</script>
	</head>
	<body>
		
		<div id="nz">
			我是哪吒
			<span id="yy">我是云韻</span>
		</div>
		
	</body>
</html>

4、瀏覽器展示

 

總結(jié)

到此這篇關(guān)于JavaScript讀取元素的樣式的文章就介紹到這了,更多相關(guān)JavaScript讀取元素的樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論