zoukankan      html  css  js  c++  java
  • 封装class类--不分割类名

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Document</title>
        <script>
            window.onload=function()
            {
    //            var dom=document.getElementsByClassName("demo");  //浏览器兼容问题,ie6,7,8,不支持
    //            alert(dom.length);
    
                //封装自己的classname类名
                function getclass(classname) 
                {
                    if(document.getElementsByClassName) //浏览器兼容的话,直接返回,错误写法document.getElementsByClassName(classname)
                    {
    //                    var dom=document.getElementsByClassName(classname);
    //                    console.log(dom.length);
                            return document.getElementsByClassName(classname); //兼容的话直接返回
                    }
    
                    //浏览器不兼容的话
                    var obj=document.getElementsByTagName("*");  //取出所有的盒子,一一遍历
                    var arr=[]; //定义一个数组存放满足类名的盒子
                    for(var i=0;i<obj.length;i++)   //遍历所有的盒子
                    {
                       if(obj[i].className==classname)
                       {
                           arr.push(obj[i]);  //不加引号  所有和classname相同类名盒子放进这个数组
                       }
    
                    }
                    return arr;
    
                }
                console.log(getclass("demo").length); //结果是3
    
    
            }
    
        </script>
    </head>
    <body>
    <div class="demo"></div>
    <div></div>
    <div class="demo"></div>
    <div></div>
    <div></div>
    <div></div>
    <div class="demo text"></div>
    <div></div>
    <div></div>
    <div class="demo"></div>
    </body>
    </html>
    

      

  • 相关阅读:
    响应式图片菜单式轮播,兼容手机,平板,PC
    javascript学习笔记一
    meta标签
    几个基本的DOS命令
    github无法正常访问的解决方法
    CSS 基础(一)
    XHTML 简介
    HTML 基础(六)
    HTML 基础(五)
    Matlab 编程简介与实例
  • 原文地址:https://www.cnblogs.com/shanlu0000/p/11203078.html
Copyright © 2011-2022 走看看