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>
    世界上最美的风景,是自己努力的模样
  • 相关阅读:
    java 面向对象(十八):包装类的使用
    java 面向对象(十七):单元测试方法
    rxjava2学习
    多线程-wait(),notify(),notifyAll()
    多线程-Thread.join()的运用
    66. Plus One
    理解Android View的事件传递机制
    78. Subsets
    程序员学习与成长的方法(转发)
    android查询天气demo,基于mvp+kotlin+rxjava2+retrofit2
  • 原文地址:https://www.cnblogs.com/xiong-hua/p/14199053.html
Copyright © 2011-2022 走看看