码迷,mamicode.com
首页 > Web开发 > 详细

jQuery操作页面元素之css style操作

时间:2020-02-08 17:45:04      阅读:106      评论:0      收藏:0      [点我收藏+]

标签:ast   function   move   har   meta   指定   idt   格式化   层叠样   

一:

在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>

 

jQuery操作页面元素之css style操作

标签:ast   function   move   har   meta   指定   idt   格式化   层叠样   

原文地址:https://www.cnblogs.com/1314bjwg/p/12283784.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!