015_获取并设置CSS类
1. hasClass()方法
1.1. hasClass()方法檢查被選元素是否包含指定的class。返回true包含指定的class, 反之不包含。
1.2. 語(yǔ)法
$(selector).hasClass(class)1.3. 參數(shù)
1.4. 如果判斷多個(gè)類是否存在, 請(qǐng)使用空格分隔類名。只有多個(gè)類都存在才返回true, 反之返回false。
2. addClass()方法
2.1. addClass()方法向被選元素添加一個(gè)或多個(gè)類。
2.2. 該方法不會(huì)移除已存在的類, 僅僅添加一個(gè)或多個(gè)類。如果class屬性不存在, 也可以直接添加類, 會(huì)自動(dòng)添加class屬性。
2.3. 如果要添加的類已經(jīng)存在, 不會(huì)有任何作用, 可以先用hasClass()方法判斷一下, 事實(shí)上不判斷也行, 感覺hasClass()在這里失去了意義。
2.4. 如需添加多個(gè)類, 請(qǐng)使用空格分隔類名。
2.5. 語(yǔ)法
$(selector).addClass(class)2.6. 參數(shù)
2.7. 使用函數(shù)來添加類
2.7.1. 使用函數(shù)向被選元素添加類。
2.7.2. 語(yǔ)法
$(selector).addClass(function(index,oldclass))2.7.3. 參數(shù)
2.8. 例子
2.8.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>addClass添加一個(gè)或多個(gè)類</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()方法向被選元素添加一個(gè)或多個(gè)類。</p><button id="btn1">添加一個(gè)類</button> <button id="btn2">添加多個(gè)類</button> <button id="btn3">使用函數(shù)來添加類</button></body> </html>2.8.2. 效果圖
3. removeClass()方法
3.1. removeClass()方法從被選元素移除一個(gè)或多個(gè)類。
3.2. 如果沒有規(guī)定參數(shù)，則該方法將從被選元素中刪除所有類。
3.3. 如果要移除的類沒有不存在, 不會(huì)有任何作用。
3.4. 如需移除多個(gè)類, 請(qǐng)使用空格分隔類名。
3.5. 語(yǔ)法
$(selector).removeClass(class)3.6. 參數(shù)
3.7. 使用函數(shù)來移除類
3.7.1. 使用函數(shù)來刪除被選元素中的類。
3.7.2. 語(yǔ)法
$(selector).removeClass(function(index,oldclass))3.7.3. 參數(shù)
3.8. 例子
3.8.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>removeClass移除一個(gè)或多個(gè)類</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()方法從被選元素移除一個(gè)或多個(gè)類。</p><button id="btn1">移除一個(gè)類</button> <button id="btn2">移除多個(gè)類</button> <button id="btn3">使用函數(shù)來移除類</button> <button id="btn4">清除所有類</button></body> </html>3.8.2. 效果圖
4. toggleClass()方法
4.1. toggleClass()方法對(duì)設(shè)置或移除被選元素的一個(gè)或多個(gè)類進(jìn)行切換。
4.2. 該方法檢查每個(gè)元素中指定的類。如果不存在則添加類, 如果已設(shè)置則刪除之。這就是所謂的切換效果。
4.3. 如果需要設(shè)置或移除多個(gè)類, 請(qǐng)使用空格分隔類名。
4.4. 不過, 通過使用"switch"參數(shù), 您能夠規(guī)定只刪除或只添加類。true是添加, false是移除。
4.5. 語(yǔ)法
$(selector).toggleClass(class,switch)4.6. 參數(shù)
4.7. 使用函數(shù)來切換類
4.7.1. 使用函數(shù)來設(shè)置或移除被選元素的一個(gè)或多個(gè)類進(jìn)行切換。
4.7.2. 語(yǔ)法
$(selector).toggleClass(function(index,class),switch)4.7.3. 參數(shù)
4.8. 例子
4.8.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>toggleClass設(shè)置或移除一個(gè)或多個(gè)類</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()方法對(duì)設(shè)置或移除被選元素的一個(gè)或多個(gè)類進(jìn)行切換。</p><button id="btn1">設(shè)置或移除一個(gè)類</button> <button id="btn2">設(shè)置或移除多個(gè)類</button> <button id="btn3">使用函數(shù)來設(shè)置或移除類</button> <button id="btn4">添加一個(gè)類</button> <button id="btn5">移除一個(gè)類</button></body> </html>4.8.2. 效果圖
總結(jié)
以上是生活随笔為你收集整理的015_获取并设置CSS类的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 090_HTMLCollection和N
- 下一篇： 004-CSS3动画类