zoukankan      html  css  js  c++  java
  • getElementsByClassName通过类名获取元素对象集合

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>index</title>
        <style>
            *{
                font-family: 微软雅黑;
            }
        </style>
    </head>
    <body>
        <h1 id='hid'>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>    
        <h1 class='hcls'>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>    
        <h1 class='hcls'>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>    
        <h1 class='hcls'>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>    
        <h1 class='hcls'>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>    
        <h1 class='hcls'>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>    
    </body>
    <script>
    hidobjs=document.getElementsByClassName('hcls'); //hidobjs是一个对象集合(数组)
    //hidobjs[0].style.background='#f0f'
    for(i=0;i<hidobjs.length;i++){
        hidobjs[i].style.background='#f0f';
    }
    </script>
    </html>

    getElementsByName通过标签的name属性来获取元素对象

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>index</title>
        <style>
            *{
                font-family: 微软雅黑;
            }
        </style>
    </head>
    <body>
        <form action="">
            <p>用户名:</p>
            <p><input type="text" name='username'></p>
            <p>密码:</p>
            <p><input type="text" name='password'></p>
            <p><input type="submit" value="Ok"></p>
        </form>
    </body>
    <script>
    usernameobj=document.getElementsByName('username');
    usernameobj[0].onfocus=function(){
        this.style.outlineColor='#f00';
    }
    </script>
    </html>
    世界上最美的风景,是自己努力的模样
  • 相关阅读:
    用Windows自带的命令结束进程
    spoolsv spoolsv.exe 进程信息
    Win XP打印机共享问题解决方法
    解决XP专业版局域网访问故障十八招
    取消时间限制和内存限制
    与操作
    SVN分支和合并的简单例子
    PHPExcel常用方法汇总
    python在windows下的简单搭建
    centos 6.2用yum安装中文输入法
  • 原文地址:https://www.cnblogs.com/xiong-hua/p/14199053.html
Copyright © 2011-2022 走看看