JS JQuery添加、替换、删除元素class属性 |
您所在的位置:网站首页 › jquery设置自定义属性值 › JS JQuery添加、替换、删除元素class属性 |
1、先声明一个div和两个class样式,用来测试: .back{ background: red; } .col{ color: aqua; } 我是div一、使用JQuery操作元素属性: 下面是获取或设置元素的DOM属性的方法,我只挑出一些和操作class属性相关的写一些小demo,其余的自己直接看教程就行了:https://www.w3school.com.cn/jquery/jquery_ref_attributes.asp 方法描述addClass()向匹配的元素添加指定的类名。attr()设置或返回匹配元素的属性和值。hasClass()检查匹配的元素是否拥有指定的类。html()设置或返回匹配的元素集合中的 HTML 内容。removeAttr()从所有匹配的元素中移除指定的属性。removeClass()从所有匹配的元素中删除全部或者指定的类。toggleClass()从匹配的元素中添加或删除一个类。val()设置或返回匹配元素的值。1、首先使用attr()和prop()方法修改元素的class属性: 1)单独使用attr(): window.onload=function(){ $("#div1").attr("class","col"); }效果: 效果: 效果: 2、addClass(): window.onload=function(){ $("#div1").attr("class","col"); $("#div1").addClass("back"); }效果: 3、hasClass(): window.onload=function(){ $("#div1").attr("class","col"); console.log($("#div1").hasClass("col")); }效果: 4、removeClass(): window.onload=function(){ $("#div1").attr("class","col"); $("#div1").removeClass("col"); }效果: 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属性覆盖掉。 效果: 说明:如果不想将之前的class属性值覆盖掉,那么将上面的代码进行简单的修改即可。(注意:+= 后面需要留一个空格) 效果: 说明:这种方法也是比较好用的,直接为元素添加一个class属性值,之前的不会覆盖。(注意:这里属性值后面没有空格) 效果: 说明:将某元素的很多class属性值中将其中一个属性值删除。 效果: 1、可以使用getAttribute()来获取某元素的class属性。 window.onload=function(){ document.getElementById('div1').classList.add('back'); console.log(document.getElementById('div1').getAttribute("class")); }效果:正常打印输出back 说明:首先使用getAttribute()方法获取到class属性值(这里要保证之前就有一个class属性,如果没有的话获取到的值会是null,使用null调用concat方法会出现错误),然后使用concat()方法进行拼接,然后再使用setAttribute()方法,将拼接好的属性值赋值到元素class属性上。 效果: 在之前的css的基础上再添加一个css:(修改字体颜色为黄色) .yellow{ color: yellow; } 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); }说明:我们首先为元素添加两个css属性,一个红色的背景一个黄色的字体,然后使用getAttribute()获取到该元素的class属性值,再使用replace将其中某一个属性进行替换(我们这里将yellow替换为col),最后将替换之后的class属性值使用setAttribute()赋值给元素。 下面是控制台打印的文字: 说明:删除和替换实现原理相同,只不过是将要替换的属性值设置为空字符串""即可实现删除。 控制台打印: “其实生活在井里也挺好的,就是偶尔,会觉得世界很空,生活很咸。” |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |