javascript基礎（class 類屬性的操作（增，刪，改，查））（四十五）

厚積薄發2017發表於2017-02-16
JavaScript

1.類屬性的操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.b1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			
			.b2{
				width: 200px;
				height: 200px;
				background-color: yellow;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				/*
				 * 點選按鈕，修改div的樣式
				 */
				
				//獲取box1
				var box1 = document.getElementById("box1");
				//為btn01繫結一個單擊響應函式
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					
					//修改box1的樣式
					/*box1.style.width = "200px";
					box1.style.height = "200px";
					box1.style.backgroundColor = "yellow";*/
					
					/*
					 * 我們可以通過修改元素的class來間接的修改元素的樣式，
					 * 	這樣我們可以同時修改多個樣式，並且提升瀏覽器渲染頁面的效能
					 * 修改class也可以使行為和表現分離，方便後期維護
					 */
					//修改box1的class為b2
					//box1.className += " b2";
					
					//向box1中新增b2這個class
					//addClass(box1 , "b2");
					
					//檢查box1中是否含有b2這個class
					//alert(box1.className == "b2") ;
					
					//建立一個正規表示式
					/*var reg = /\bb2\b/;
					alert(reg.test(box1.className));*/
					
					//alert(hasClass(box1,"b3"));
					
					//removeClass(box1,"b2");
					
					toggleClass(box1,"b2");
					
				};
				
			};
			
			
			/*
			 * 定義一個專門用來向元素中新增class的函式
			 * 	引數：
			 * 		obj 要新增class屬性的物件
			 * 		cn 要新增的class的屬性值
			 */
			function addClass(obj , cn){
				
				//如果元素中有該class則不新增，沒有才新增
				if(!hasClass(obj , cn)){
					obj.className += " " + cn;
				}
				
			}
			
			/*
			 * 建立一個函式檢查一個元素中是否含有指定的class
			 * 	如果有，則返回true。否則返回false
			 */
			function hasClass(obj , cn){
				
				//建立正規表示式
				var reg = new RegExp("\\b"+cn+"\\b");
				
				//返回檢查結果
				return reg.test(obj.className);
			}
			
			/*
			 * 用來從指定元素中刪除class值的方法
			 */
			function removeClass(obj , cn){
				
				//要刪除一個class，就是將這個class替換為一個空串
				//建立正規表示式
				var reg = new RegExp("\\b"+cn+"\\b" , "g");
				
				//判斷obj中是否含有這個class
				
				if(reg.test(obj.className)){
					//將內容替換為空串
					obj.className = obj.className.replace(reg , "");
				}
			}
			
			/*
			 * 用來切換元素的class的方法
			 * 	如果元素中含有該class，則刪除
			 * 	如果元素中沒有該class，則新增
			 * 
			 */
			function toggleClass(obj , cn){
				//檢查obj中是否含有cn
				if(hasClass(obj , cn)){
					//有該class，則刪除
					removeClass(obj , cn);
				}else{
					//沒有該class，則新增
					addClass(obj , cn);
				}
				
			}
			
		</script>
	</head>
	<body>
		
		<button id="btn01">點我一下</button>
		<br /><br />
		
		<div id="box1" class="b1 b2 b3 b4 b2 b2 b2"></div>
		
	</body>
</html>


相關文章