DDR爱好者之家

javaScript给元素添加多个class的简单实现
站长资源 2024/11/29 佚名
49 1538
DDR爱好者之家 Design By 杰米

javaScript给元素添加多个class的简单实现

<html>
　　<head>

　　　　<style type="text/css">

　　　　　　.div2{

　　　　　　font-size:16px;　

　　　　　　color:orange;

　　　　　　}

　　　　　　.div3{

　　　　　　font-size:20px;

　　　　　　color:blue;

　　　　　　}

　　　　<style>

　　　　<script type="text/javascript">

　　　　　　[1]直接把样式赋值给className

　　　　　　var odiv=document.getElementById('div1');

　　　　　　odiv.className= div3

　　　　　　//这样我们会得到 class ="div3" 会直接把div2样式给覆盖掉;

　　　　　　[2]使用累加赋值给className

　　　　　　var odiv=document.getElementById('div1');

　　　　　　odiv.className+=" "+div3  　　//样式和样式之间需要空隙 ，所以加个空字符串隔开

　　　　　　//这样可以得到 class="div2 div3" 可以正常增加，但是我们在添加样式的时候我们得考虑下他本身之前有没有同名的样式，如果有我们添加的话就会变成累赘 比如class="div2 div3 div3";

　　　　　　[3]检测样式原先之前是否有相同的样式

　　　　　　var odiv=document.getElementById('div1');　

　　　　　　function hasClass(element,csName){

　　　　　　　　element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正则检测是否有相同的样式

 

　　　　}　　

　　　　　　[4]在[3]的基础上我们就可以进行判断性给元素添加样式了　　　　　

　　　　　　var odiv=document.getElementById('div1');　

　　　　　　function hasClass(element,csName){

　　　　　　　return 　element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正则检测是否有相同的样式

　　　　}　

　　　　　　function addClass(element,csName){

　　　　　　　if(!hasClass(element,csName)){

　　　　　　　　　element.className+=' '+csName;

　　　　　　}

　　　　addClass(odiv,'div3');

　　　　//这样就可以灵活给元素添加样式了;

　　　　【元素删除指定样式】

　　//同样先进行判断，在进行删除

　　

　　　　　var odiv=document.getElementById('div1');　

　　　　　function hasClass(element,csName){

　　　　　　　return 　element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正则检测是否有相同的样式

　　　　}　

　　　　　function deleteClass(element,csName){

　　　　　　　if(!hasClass(element,csName)){

　　　　　　　　　element.className.replace(RegExp('(\\s|^)'+csName+'(\\s|$)'),' ');  //利用正则捕获到要删除的样式的名称，然后把他替换成一个空白字符串，就相当于删除了

　　　　　}


　deleteClass(odiv,div3);
 

　　}

　　　　</script>

　　</head>

　　<body>

　　　　<div id="div1" class='div2'> 测试</div>

　　</body>

</html>

以上这篇javaScript给元素添加多个class的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米