015_获取并设置CSS类
1. hasClass()方法
1.1. hasClass()方法檢查被選元素是否包含指定的class。返回true包含指定的class, 反之不包含。
1.2. 語法
$(selector).hasClass(class)1.3. 參數
1.4. 如果判斷多個類是否存在, 請使用空格分隔類名。只有多個類都存在才返回true, 反之返回false。
2. addClass()方法
2.1. addClass()方法向被選元素添加一個或多個類。
2.2. 該方法不會移除已存在的類, 僅僅添加一個或多個類。如果class屬性不存在, 也可以直接添加類, 會自動添加class屬性。
2.3. 如果要添加的類已經存在, 不會有任何作用, 可以先用hasClass()方法判斷一下, 事實上不判斷也行, 感覺hasClass()在這里失去了意義。
2.4. 如需添加多個類, 請使用空格分隔類名。
2.5. 語法
$(selector).addClass(class)2.6. 參數
2.7. 使用函數來添加類
2.7.1. 使用函數向被選元素添加類。
2.7.2. 語法
$(selector).addClass(function(index,oldclass))2.7.3. 參數
2.8. 例子
2.8.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>addClass添加一個或多個類</title><style type="text/css">.background {background-color: red;width: 600px;height: 300px;}.font {font-size: 24px;font-weight: bold;}.margin {margin-left: 30px;margin-top: 20px;}.border {border-style: solid;border-width: 3px;}</style><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){if(!$("#p1").hasClass('background')) {$("#p1").addClass('background');}});$('#btn2').click(function(){$("#p1").addClass('font margin');});$('#btn3').click(function(){if(!$("#p1").hasClass('border')){$("#p1").addClass(function(index, oldclass){return 'border';});}});});</script></head><body><p id="p1">addClass()方法向被選元素添加一個或多個類。</p><button id="btn1">添加一個類</button> <button id="btn2">添加多個類</button> <button id="btn3">使用函數來添加類</button></body> </html>2.8.2. 效果圖
3. removeClass()方法
3.1. removeClass()方法從被選元素移除一個或多個類。
3.2. 如果沒有規定參數，則該方法將從被選元素中刪除所有類。
3.3. 如果要移除的類沒有不存在, 不會有任何作用。
3.4. 如需移除多個類, 請使用空格分隔類名。
3.5. 語法
$(selector).removeClass(class)3.6. 參數
3.7. 使用函數來移除類
3.7.1. 使用函數來刪除被選元素中的類。
3.7.2. 語法
$(selector).removeClass(function(index,oldclass))3.7.3. 參數
3.8. 例子
3.8.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>removeClass移除一個或多個類</title><style type="text/css">.background {background-color: red;width: 600px;height: 300px;}.font {font-size: 24px;font-weight: bold;}.margin {margin-left: 30px;margin-top: 20px;}.border {border-style: solid;border-width: 3px;}</style><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("#p1").removeClass('background');});$('#btn2').click(function(){$("#p1").removeClass('font margin');});$('#btn3').click(function(){$("#p1").removeClass(function(index, oldclass){return 'border';});});$('#btn4').click(function(){$("#p1").removeClass();});});</script></head><body><p id="p1" class="background font margin border">removeClass()方法從被選元素移除一個或多個類。</p><button id="btn1">移除一個類</button> <button id="btn2">移除多個類</button> <button id="btn3">使用函數來移除類</button> <button id="btn4">清除所有類</button></body> </html>3.8.2. 效果圖
4. toggleClass()方法
4.1. toggleClass()方法對設置或移除被選元素的一個或多個類進行切換。
4.2. 該方法檢查每個元素中指定的類。如果不存在則添加類, 如果已設置則刪除之。這就是所謂的切換效果。
4.3. 如果需要設置或移除多個類, 請使用空格分隔類名。
4.4. 不過, 通過使用"switch"參數, 您能夠規定只刪除或只添加類。true是添加, false是移除。
4.5. 語法
$(selector).toggleClass(class,switch)4.6. 參數
4.7. 使用函數來切換類
4.7.1. 使用函數來設置或移除被選元素的一個或多個類進行切換。
4.7.2. 語法
$(selector).toggleClass(function(index,class),switch)4.7.3. 參數
4.8. 例子
4.8.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>toggleClass設置或移除一個或多個類</title><style type="text/css">.background {background-color: red;width: 600px;height: 300px;}.font {font-size: 24px;font-weight: bold;}.margin {margin-left: 30px;margin-top: 20px;}.border {border-style: solid;border-width: 3px;}</style><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("#p1").toggleClass('background');});$('#btn2').click(function(){$("#p1").toggleClass('font margin');});$('#btn3').click(function(){$("#p1").toggleClass(function(index, oldclass){return 'border';});});$('#btn4').click(function(){$("#p1").toggleClass('background', true);});$('#btn5').click(function(){$("#p1").toggleClass('background', false);});});</script></head><body><p id="p1" class="background font margin border">toggleClass()方法對設置或移除被選元素的一個或多個類進行切換。</p><button id="btn1">設置或移除一個類</button> <button id="btn2">設置或移除多個類</button> <button id="btn3">使用函數來設置或移除類</button> <button id="btn4">添加一個類</button> <button id="btn5">移除一個類</button></body> </html>4.8.2. 效果圖
總結
以上是生活随笔為你收集整理的015_获取并设置CSS类的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 090_HTMLCollection和N
- 下一篇： 004-CSS3动画类