JQueryDOM之樣式操作

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

成都創(chuàng)新互聯(lián)自2013年起，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都做網(wǎng)站、網(wǎng)站設(shè)計網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元阜城做網(wǎng)站,已為上家服務(wù),為阜城各地企業(yè)和個人服務(wù),聯(lián)系電話:028-86922220

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

追加樣式

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

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

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

如果給一個元素添加了多個 class 值，那么就相當(dāng)于合并了它們的樣式
如果有不同的 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ù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！

網(wǎng)站欄目：JQueryDOM之樣式操作
網(wǎng)站地址：http://muchs.cn/article10/gdcgdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、商城網(wǎng)站、Google、電子商務(wù)、品牌網(wǎng)站建設(shè)、品牌網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容