jQuery操作页面元素之css style操作
一：
在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 >span文本1</span>
61 <span >span文本2</span><br>
62 <button >设置样式</button><br>
63 <button >查看样式</button><br>
64 <button >添加样式</button><br>
65 <button >删除样式</button><br>
66 <button >切换样式</button><br>
67 <div ></div>
68 </body>
69
70 </html>