当前位置:首页 > Web开发 > 正文

removeClass():删除类

2024-03-31 Web开发

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

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/30305.html