zoukankan      html  css  js  c++  java
  • js获取class

      ie不支持getElementsByClassName,所以要自己实现获取类名为className的所有元素。

    <html>
    <head>
    <script type="text/javascript">
    
    window.onload = function()
    {   var topMenus = getClass('li','topMenu');
        for(var i=0;i < topMenus.length; i++)
        {
            alert(topMenus[i].innerHTML);        
        }
    
    }
    
    function getClass(tagName,className) //获得标签名为tagName,类名className的元素
    {
        if(document.getElementsByClassName) //支持这个函数
        {        return document.getElementsByClassName(className);
        }
        else
        {       var tags=document.getElementsByTagName(tagName);//获取标签
            var tagArr=[];//用于返回类名为className的元素
            for(var i=0;i < tags.length; i++)
            {
                if(tags[i].class == className)
                {
                    tagArr[tagArr.length] = tags[i];//保存满足条件的元素
                }
            }
            return tagArr;
        }
    
    }
    
    
    
    </script>
    
    </head>
    <body>
    
    <ul id="nav">
    <li class="topMenu"><a href="#">产品介绍</a>
        <ul class="subMenu">
            <li><a href="#">产品1</a></li>
            <li><a href="#">产品2</a></li>
            <li><a href="#">产品3</a></li>
            <li><a href="#">产品4</a></li>
            <li><a href="#">产品5</a></li>
            <li><a href="#">产品6</a></li>
        </ul>
    </li>
    <li class="topMenu"><a href="#">服务介绍</a>
        <ul class="subMenu">
            <li><a href="#">服务1</a></li>
            <li><a href="#">服务2</a></li>
            <li><a href="#">服务3</a></li>
            <li><a href="#">服务4</a></li>        
        </ul>
    </li>
    <li class="topMenu"><a href="#">成功案例</a>
        <ul class="subMenu">
            <li><a href="#">案例1</a></li>
            <li><a href="#">案例2</a></li>
            <li><a href="#">案例3</a></li>
            <li><a href="#">案例4</a></li>
        </ul>
    </li>
    <li class="topMenu"><a href="#">关于我们</a>
        <ul class="subMenu">
            <li><a href="#">我们1</a></li>
            <li><a href="#">我们2</a></li>
            <li><a href="#">我们3</a></li>
            <li><a href="#">我们4</a></li>
        </ul>
    </li>
    <li class="topMenu"><a href="#">联系我们</a>
        <ul class="subMenu">
            <li><a href="#">联系1</a></li>
            <li><a href="#">联系2</a></li>
            <li><a href="#">联系3</a></li>
            <li><a href="#">联系4</a></li>
            <li><a href="#">联系5</a></li>
            <li><a href="#">联系6</a></li>
            <li><a href="#">联系7</a></li>
        </ul>
    </li>
    
    </ul>
    </body>
    </html>

    注意getElementsByClassName和getElementsByTagName都有s;

    js中不能用int a=1;要用var a=1;

  • 相关阅读:
    luogu P4284 [SHOI2014]概率充电器 期望 概率 树形dp
    luogu P5161 WD与数列 SAM 线段树合并 启发式合并
    5.5 省选模拟赛 B Permutation 构造 贪心
    luogu P3761 [TJOI2017]城市 树的直径 bfs
    一本通 1783 矩阵填数 状压dp 容斥 计数
    CF R638 div2 F Phoenix and Memory 贪心 线段树 构造 Hall定理
    BSOJ 5445 -- 【2018雅礼】树 prufer序列 dp
    CF1037H Security 线段树合并 SAM
    c++11の顺序容器
    c++11の关联容器
  • 原文地址:https://www.cnblogs.com/wang7/p/2769677.html
Copyright © 2011-2022 走看看