一：
在HTML文件中，CSS（Cascading Style Sheet，層疊樣式表）用於格式化元素。jQuery提供了用於操作CSS的方法。
1：css()方法:
css()方法可獲取或設置CSS樣式。
2:CSS類操作方法
jQuery提供了直接操作元素class屬性的方法。
• addClass()：添加類。
• removeClass()：刪除類。
• toggleClass()：切換類。若元素無指定類，則為其添加該類；若有指定類，則將其刪除。
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>css樣式操作</title> 7 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"> 8 </script> 9 <style type="text/css"> 10 .b { 11 border: 1px solid red; 12 padding: 5px; 13 } 14 15 .c { 16 background-color: turquoise; 17 } 18 19 .bc { 20 background-color: red; 21 } 22 </style> 23 </head> 24 <script> 25 $(function() { 26 /* 27 $('div:lt'):選中div標簽的下標不大於2的div。:lt(index)基本篩選器 28 */ 29 $('#btn1').click(function() { 30 $('div:lt(2)').css({ 31 padding: '6px', 32 margin: '5px' 33 }) 34 }) 35 $('#btn2').click(function() { 36 $('#out').text($('div').css('borderTopWidth')) //獲取樣式 37 }) 38 $('#btn3').click(function() { 39 //添加css樣式(添加css類) 40 $('span').addClass('b c') 41 }) 42 $('#btn4').click(function() { 43 /* 44 removeClass刪除類 45 $('span:last'):last表示綁定匹配到的最后一個span 46 $('span:first') 47 */ 48 $('span:last').removeClass('c') 49 }) 50 $('#btn5').click(function() { 51 //toggleClass切換類. 52 $('span').toggleClass('bc') 53 }) 54 }) 55 </script> 56 57 <body> 58 <div>文本1</div><br> 59 <div>文本2</div><br> 60 <span id="s1">span文本1</span> 61 <span id="s2">span文本2</span><br> 62 <button id="btn1">設置樣式</button><br> 63 <button id="btn2">查看樣式</button><br> 64 <button id="btn3">添加樣式</button><br> 65 <button id="btn4">刪除樣式</button><br> 66 <button id="btn5">切換樣式</button><br> 67 <div id="out"></div> 68 </body> 69 70 </html>