1、先声明一个div和两个class样式,用来测试:
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<style>
.back{
background: red;
}
.col{
color: aqua;
}
</style>
</head>
<body>
<div id="div1">我是div</div>
</body>
</html>
一、使用JQuery操作元素属性:
下面是获取或设置元素的DOM属性的方法,我只挑出一些和操作class属性相关的写一些小demo,其余的自己直接看教程就行了
方法 | 描述 |
addClass() | 向匹配的元素添加指定的类名。 |
attr() | 设置或返回匹配元素的属性和值。 |
hasClass() | 检查匹配的元素是否拥有指定的类。 |
html() | 设置或返回匹配的元素集合中的 HTML 内容。 |
removeAttr() | 从所有匹配的元素中移除指定的属性。 |
removeClass() | 从所有匹配的元素中删除全部或者指定的类。 |
toggleClass() | 从匹配的元素中添加或删除一个类。 |
val() | 设置或返回匹配元素的值。 |
1、首先使用attr()和prop()方法修改元素的class属性:
1)单独使用attr():
<script>
window.onload=function(){
$("#div1").attr("class","col");
}
</script>
效果:
2)单独使用prop():
<script>
window.onload=function(){
$("#div1").prop("class","back");
}
</script>
效果:
3)同时使用attr()和prop():
<script>
window.onload=function(){
$("#div1").prop("class","back");
}
</script>
效果:
说明:通过上面的效果可以看出,通过attr()和prop()方法都可以为元素添加class属性,但是attr()和prop()是为元素添加新的class属性的同时,将原来的class属性全部清空(也就是覆盖之前的属性)。
2、addClass():
<script>
window.onload=function(){
$("#div1").attr("class","col");
$("#div1").addClass("back");
}
</script>
效果:
说明:addclass()可以为元素添加class属性,并且元素本身的class属性不会受到影响。
3、hasClass():
<script>
window.onload=function(){
$("#div1").attr("class","col");
console.log($("#div1").hasClass("col"));
}
</script>
效果:
说明:判断某元素是否有某个class。
4、removeClass():
<script>
window.onload=function(){
$("#div1").attr("class","col");
$("#div1").removeClass("col");
}
</script>
效果:
说明:将元素的某个class属性移除。
5、toggleClass():
这个我就不测试了,就是如果元素中有这个class属性,那么就将class删除,如果没有该class属性,则将这个class添加。
二、使用JavaScript对元素的class属性进行操作:
1、添加class属性值:
window.onload=function(){
document.getElementById('div1').className='col';
document.getElementById('div1').className='back';
}
说明:上面这种方式和直接使用attr()和prop()一样,虽然会为元素添加一个class属性,但是会将之前所有的class属性覆盖掉。
效果:
2、添加class属性值:
window.onload=function(){
document.getElementById('div1').className='col';
document.getElementById('div1').className +=' back'; //属性值back前有一个空格
}
说明:如果不想将之前的class属性值覆盖掉,那么将上面的代码进行简单的修改即可。(注意:+= 后面需要留一个空格)
效果:
3、添加class属性值:
window.onload=function(){
document.getElementById('div1').className='col';
document.getElementById('div1').classList.add('back'); //此处没有空格
}
说明:这种方法也是比较好用的,直接为元素添加一个class属性值,之前的不会覆盖。(注意:这里属性值后面没有空格)
效果:
4、删除class属性值:
window.onload=function(){
document.getElementById('div1').className='col';
document.getElementById('div1').className +=' back';
document.getElementById('div1').classList.remove("col");
}
说明:将某元素的很多class属性值中将其中一个属性值删除。
效果:
三、使用getAttribute()和setAttribute()方法来操作class属性:
1、可以使用getAttribute()来获取某元素的class属性。
<script>
window.onload=function(){
document.getElementById('div1').classList.add('back');
console.log(document.getElementById('div1').getAttribute("class"));
}
</script>
效果:正常打印输出back
2、添加class属性:
<script>
window.onload=function(){
document.getElementById('div1').classList.add("back");
var classVal = document.getElementById('div1').getAttribute("class");
classVal = classVal.concat(" col");
document.getElementById('div1').setAttribute("class",classVal);
}
</script>
说明:首先使用getAttribute()方法获取到class属性值(这里要保证之前就有一个class属性,如果没有的话获取到的值会是null,使用null调用concat方法会出现错误),然后使用concat()方法进行拼接,然后再使用setAttribute()方法,将拼接好的属性值赋值到元素class属性上。
效果:
3、替换class属性:
在之前的css的基础上再添加一个css:(修改字体颜色为黄色)
.yellow{
color: yellow;
}
<script>
window.onload=function(){
document.getElementById('div1').classList.add("yellow");
document.getElementById('div1').classList.add("back");
var classVal = document.getElementById('div1').getAttribute("class");
console.log(classVal);
classVal = classVal.replace("yellow","col");
console.log(classVal);
document.getElementById('div1').setAttribute("class",classVal);
}
</script>
说明:我们首先为元素添加两个css属性,一个红色的背景一个黄色的字体,然后使用getAttribute()获取到该元素的class属性值,再使用replace将其中某一个属性进行替换(我们这里将yellow替换为col),最后将替换之后的class属性值使用setAttribute()赋值给元素。
下面是控制台打印的文字:
效果:(已经将黄色字体替换掉了)
4、删除class属性值:
<script>
window.onload=function(){
document.getElementById('div1').classList.add("yellow");
document.getElementById('div1').classList.add("back");
var classVal = document.getElementById('div1').getAttribute("class");
console.log(classVal);
classVal = classVal.replace("yellow","");
console.log(classVal);
document.getElementById('div1').setAttribute("class",classVal);
}
</script>
说明:删除和替换实现原理相同,只不过是将要替换的属性值设置为空字符串""
即可实现删除。
控制台打印:
效果:将黄色字体效果删除了
你要去做一个大人,不要回头,不要难过。
“其实生活在井里也挺好的,就是偶尔,会觉得世界很空,生活很咸。”