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

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

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

一、getComputedStyle()

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

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

語(yǔ)法

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

2、兩個(gè)參數(shù)

要獲取樣式的元素

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

3、代碼實(shí)例

<!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(){
				
				//點(diǎn)擊按鈕以后讀取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無(wú)效

二、定義一個(gè)方法獲取元素信息

1、代碼實(shí)例

<!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(){
				
				//點(diǎn)擊按鈕以后讀取box1的樣式
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					// 定義一個(gè)函數(shù)，用來(lái)獲取指定元素的當(dāng)前的樣式
					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、這兩個(gè)元素是獲取元素的寬度和高度，不帶px

 

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

 

3、代碼實(shí)例

<!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、獲取元素的整個(gè)的寬度和高度，包括內(nèi)容區(qū)、內(nèi)邊距和邊框

 

2、代碼實(shí)例

<!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
					 * 	- 獲取元素的整個(gè)的寬度和高度，包括內(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、獲取當(dāng)前元素的父元素

 

2、代碼實(shí)例

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

3、瀏覽器展示

六、offsetLeft和offsetTop

1、offsetLeft

當(dāng)前元素相對(duì)于其定位父元素的水平偏移量

2、offsetTop

當(dāng)前元素相對(duì)于其定位父元素的垂直偏移量

七、scrollWidth和scrollHeight

1、scrollWidth

可以獲取元素整個(gè)滾動(dòng)區(qū)域的寬度

2、scrollHeight

可以獲取元素整個(gè)滾動(dòng)區(qū)域的高度

八、scrollLeft和scrollTop

1、scrollLeft

獲取水平滾動(dòng)條滾動(dòng)的距離

2、scrollTop

獲取垂直滾動(dòng)條滾動(dòng)的距離

當(dāng)滿足scrollHeight - scrollTop == clientHeight，說明垂直滾動(dòng)條滾動(dòng)到底了。

當(dāng)滿足scrollWidth - scrollLeft == clientWidth，說明水平滾動(dòng)條滾動(dòng)到底了。

九、 事件的冒泡

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

 

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

 

3、代碼實(shí)例

<!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(){
				//為云韻綁定一個(gè)單擊響應(yīng)函數(shù)
				var yy = document.getElementById("yy");
				yy.onclick = function(event){
					event = event || window.event;

					alert("我是云韻");
					
					//取消冒泡
					//可以將事件對(duì)象的cancelBubble設(shè)置為true，即可取消冒泡
					//event.cancelBubble = true;
				};
				
				//為哪吒綁定一個(gè)單擊響應(yīng)函數(shù)
				var nz = document.getElementById("nz");
				nz.onclick = function(event){
					event = event || window.event;
					
					alert("我是哪吒");
					
					event.cancelBubble = true;
				};
				
				//為body綁定一個(gè)單擊響應(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論