• 原生js获取元素的class属性(获取class的所有元素)以及改变或添加calssName


    今天在工作中,用到了设置className,因此查阅了一下资料,总结一下。

    一、如何用原生js获取class属性

    1 <div class = "dom'>
    2 </div>

    元素JS实现方法:

     1 function $class(domclass)
     2  {
     3      var odiv = document.getElementsByTagName("*");
     4      var aResult = []; //定义一个空数组,用来存放与目标className相同的元素
     5      for(var i = 0; i<odiv.length; i++)
     6      {//这个是遍历页面中所有元素然后拿他们的class进行对比。如果和我们传进来的domclass这个参数一样就把他放进数组 aResult中。
     7          if(odiv[i].className == domclass)
     8          {
     9              aResult.push(oDiv[i]);   //获取到的元素推进数组中
    10          }
    11          return aResult;   //返回这个放进了domclass元素的数组
    12      }
    13  }
    14 window.onload = function(){
    15    alert($class('boom').length); //获取这些元素的个数
    16    alert($class('boom')[0].className); //获取这些元素的第一个元素的className,其实都是一样的className.
    17 }

    用这个函数来获取就很简单了只需要var d = $class("dom");

    这个函数的意思是:
    var odiv = document.getElementsByTagName("*");
    这句意思是获取页面中所有的DOM元素 

    二、js改变或添加className

    1 <style type="text/css">
    2 .newDiv {
    3     font-weight: bold;
    4 }
    5 </style>
     1 <script>
     2 function clk() {
     3     var parent = document.getElementById("parent");
     4    // parent.className = parent.className + " newDiv";  //添加classname
     5 
     6    parent.className = " newDiv";  //改变classname
     7 
     8 }
     9 </script>
    10 
    11 </head>
    12 <body>
    13 <input type="button" value="click" onclick="clk();"/>
    14 <div id="parent" class="google">
    15     <div >child</div>
    16 </div>
    17 
    18 </body>
  • 相关阅读:
    shell脚本按当前日期输出日志
    bat弹出确认或取消窗口
    bat脚本输出日志
    北京浩赢科技有限公司与好宝多多
    bat延迟执行脚本,利用choice实现定时执行功能
    centos下安装tunctl
    OpenStack Train版 简单部署流程(4)- octavia
    LVM基础
    OpenStack Train版 简单部署流程(3)- ceilometer
    openstack stein
  • 原文地址:https://www.cnblogs.com/hl-520/p/4245475.html
走看看 - 开发者的网上家园