JQueryDOM之樣式操作

更新時間：2019年03月27日 09:51:14 作者：cc小馬哥

這篇文章主要介紹了JQueryDOM之樣式操作，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧

設(shè)置樣式和獲取樣式

class 也是節(jié)點元素的屬性，因此獲取class 和設(shè)置class 都可以使用attr()方法來完成

追加樣式

直接使用attr()方法設(shè)置class屬性，會將原來的class屬性替換掉

如果在添加新的樣式時，還需要保留原有樣式，可以使用addClass()方法

注意：當一個節(jié)點元素包含了多個class樣式時，將按照以下方式進行處理：

如果給一個元素添加了多個 class 值，那么就相當于合并了它們的樣式
如果有不同的 class 設(shè)定了同一樣式屬性，則后者覆蓋前者

移除樣式

如果要刪除class某個值，可以使用removeClass()方法完成，它的作用是從匹配的元素中刪除全部或者指定的class

不傳遞參數(shù)時，刪除所有；給定參數(shù)時只刪除指定的class

判斷是否含有某個樣式

hasClass()方法可以用來判斷元素中是否包含某個class，如果有則返回true，否則返回false

案例源碼：

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>DOM樣式操作</title>
 <script src="../js/jquery-3.1.1.js"></script>
 <script>
  	// 
  	$(function(){
  		// 給id為p2的元素添加一個樣式p_content
  		$("#btn1").click(function(){
  			$("#p2").attr("class","p_content");
  		});
  		// 追加樣式
  		$("#btn2").click(function(){
  			$("#p1").addClass("p_bg");
  		});
  		// 移除樣式
  		$("#btn3").click(function(){
  			// 如果removeClass里面不寫參數(shù)的話。就是移除全部樣式
  			$("#p1").removeClass("p_bg");
  			$("#p2").addClass("p_bg").removeClass("p_content");
  		});
  		// 判斷樣式
  		$("#btn4").click(function(){
  			alert($("#p2").hasClass("p_content"));
  		});
  	})
 </script>
 <style>
  .p_content {
   color: red;
   font-size: 15px;
  }
 
  .p_bg {
   background-color: red;
   color: yellow;
   font-weight: bold;
  }
 </style>
</head>
<body>
 <p id="p1" class="p_content">你最喜歡的水果?</p>
 <ul>
  <li title="蘋果">蘋果</li>
  <li title="桔子">桔子</li>
  <li title="香蕉">香蕉</li>
 </ul>
 
 <p id="p2">你最喜歡的運動是？</p>
 <ul>
  <li>游泳</li>
  <li>籃球</li>
  <li>足球</li>
 </ul>
 
 <button id="btn1">設(shè)置和獲取樣式</button>
 <button id="btn2">追加樣式</button><br /><br />
 <button id="btn3">移除樣式</button>
 <button id="btn4">判斷樣式</button><br /><br />
</body>
</html>

以上所述是小編給大家介紹的JQueryDOM之樣式操作詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: