返回根据ID选择元......登陆

根据ID选择元素

Ai蓝胖子2019-06-21 10:03:20142

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>根据id选择元素</title>

</head>

<body>

<ul>

    <li id="item1">列表01</li>

    <li id="item2">列表02</li>

    <li id="item3">列表03</li>

    <li id="item4">列表04</li>

    <li id="item5">列表05</li>

</ul>

</body>

</html>

<script>

    //使用id属性获取元素

    let item1=document.getElementById('item1');

    let item2=document.getElementById('item2');

    let item3=document.getElementById('item3');

    //设置元素的样式

    item1.style.color='red';

    item2.style.backgroundColor='green';

    item3.style.fontSize='1.5rem';

    item3.style.color='yellow';

    //如果需要使用多个id来获取元素,可以通过函数来简化操作

    function getElements(){//参数是多个id字符串

        let elements={};//创建一个空的map映射对象来保存结果

        for (let i=0; i<arguments.length;i++){

            let id =arguments[i];//获取到要查询的每个id

            let elt=document.getElementById(id);//根据id查找元素

            if(elt===null){

                throw new Error('NO element with id:' + id)//跑出异常

            }

            elements[id]=elt;//将获取到的元素存入到映射数据中

        }

        return elements;

    }

    //获取页面上指定的id属性的元素,返回一个关联数组类型的对象,键名就是id的值

    let elements = getElements('item4','item5');

    for (let key in elements){

        elements[key].style.backgroundColor='blue';

    }

</script>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网