zoukankan      html  css  js  c++  java
  • 原生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>
  • 相关阅读:
    ubuntu下解决无法解析或打开软件包列表或状态文件的问题
    linux 解除文件root权限限制
    查看linux设备信息的命令
    R系安装rpm包
    重启窗口管理器
    内存泄漏如何定位?
    双屏显示,HDMI可以正常显示,lvds不显示
    避免linux下log在/var/log/messages 中重复输出的办法
    debian编包成功后,想要修改的文件的内容没有变化
    linux terminal 显示不全 将log内容打印出来
  • 原文地址:https://www.cnblogs.com/hl-520/p/4245475.html
Copyright © 2011-2022 走看看