快盘下载:好资源、好软件、快快下载吧!

快盘排行|快盘最新

当前位置:首页软件教程电脑软件教程 → JavaScript给元素添加多个class的简单实现

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

时间:2022-09-15 19:41:13人气:作者:快盘下载我要评论

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

当div 中的class 有多个classname时,它会同时应用这几个class定义的CSS样式,那么应用时的优先级是怎么样的?

如果有多个样式的话,会采取覆盖的形式执行。就是如果有定义同一个属性比如background,后面定义的background属性会覆盖前面的background属性,下面是用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的简单实现

https://www.jb51.net/article/88901.htm

相关文章

  • 安卓浏览器横评_flash浏览器

    安卓浏览器横评_flash浏览器,近日国外媒体Android Authority就对全球使下载最大的11款手机浏览器进行了性能方面的横向评测,相信在看完后,你能够从中找到更适合自己的手机浏览器。......
  • ESLint 配置入门,你学会了吗?

    ESLint 是一款检查 JavaScript 程序是否符合特定的规则的工具。比如字符串用单引号还是双引号,Tab 缩进用 2 个空格还是 4 个空格还是其他,这些都可以用 ESLint 来规定。...

网友评论

快盘下载暂未开通留言功能。

关于我们| 广告联络| 联系我们| 网站帮助| 免责声明| 软件发布

Copyright 2019-2029 【快快下载吧】 版权所有 快快下载吧 | 豫ICP备10006759号公安备案:41010502004165

声明: 快快下载吧上的所有软件和资料来源于互联网,仅供学习和研究使用,请测试后自行销毁,如有侵犯你版权的,请来信指出,本站将立即改正。