JS基礎_獲取元素的樣式

ZHOU_VIP發表於2020-11-28
JS
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				//點選按鈕以後讀取box1的樣式
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					
					/*
					 * 獲取元素的當前顯示的樣式
					 * 	語法：元素.currentStyle.樣式名
					 * 它可以用來讀取當前元素正在顯示的樣式
					 * 	如果當前元素沒有設定該樣式，則獲取它的預設值
					 * 
					 * currentStyle只有IE瀏覽器支援，其他的瀏覽器都不支援
					 */
					//alert(box1.currentStyle.width);
					//box1.currentStyle.width = "200px";
					//alert(box1.currentStyle.backgroundColor);
					

					/*
					 * 在其他瀏覽器中可以使用
					 * 		getComputedStyle()這個方法來獲取元素當前的樣式
					 * 		這個方法是window的方法，可以直接使用
					 * 需要兩個引數
					 * 		第一個：要獲取樣式的元素
					 * 		第二個：可以傳遞一個偽元素，一般都傳null
					 * 
					 * 該方法會返回一個物件，物件中封裝了當前元素對應的樣式
					 * 	可以通過物件.樣式名來讀取樣式
					 * 	如果獲取的樣式沒有設定，則會獲取到真實的值，而不是預設值
					 * 	比如：沒有設定width，它不會獲取到auto，而是一個長度
					 * 
					 * 但是該方法不支援IE8及以下的瀏覽器
					 * 
					 * 通過currentStyle和getComputedStyle()讀取到的樣式都是隻讀的，
					 * 	不能修改，如果要修改必須通過style屬性
					 */
					var obj = getComputedStyle(box1,null);
					alert(getComputedStyle(box1,null).width);

					//正常瀏覽器的方式
					alert(getComputedStyle(box1,null).backgroundColor);
					
					//IE8的方式
					alert(box1.currentStyle.backgroundColor);
					
					
					var w = getStyle(box1,"width");
					alert(w);
					
					
				};
				
			};
			
			/*
			 * 定義一個函式，用來獲取指定元素的當前的樣式
			 * 引數：
			 * 		obj 要獲取樣式的元素
			 * 		name 要獲取的樣式名
			 */
			
			function getStyle(obj , name){
				
				if(window.getComputedStyle){
					//正常瀏覽器的方式，具有getComputedStyle()方法
					return getComputedStyle(obj , null)[name];
				}else{
					//IE8的方式，沒有getComputedStyle()方法
					return obj.currentStyle[name];
				}
				
				//return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];
				
			}
			
			
		</script>
	</head>
	<body>
		<button id="btn01">點我一下</button>
		<br /><br />
		<div id="box1" ></div>
	</body>
</html>

 

相關文章