一、获取标签的属性

1、获取标签自带的属性

// 第一种方式：元素对象.属性名
// 第一步：先找到标签，第二部才是获取到该标签的属性
var input = document.getElementById('user')
console.log(input.value,input.type);
// 更改属性值
input.value="用户名"

2、自定义的属性

<input type="text" value="文本框" id="user">
<div id="div_0" class="div" stuname="张三">这是一个div</div>
<div id="div_1" data-index="1" data-yuan="女"></div>
<script>
    // 自定义属性
    var div_0 = document.getElementById('div_0')
    // getAttribute()获取标签的属性的值(包括一些自定义属性)
    console.log(div_0.getAttribute('stuname'));
    console.log(div_0.getAttribute('class'));
    // setAttribute()设置属性
    div_0.setAttribute("stuid","1001")
    // attributes：获取的是标签自带的属性以及自定义属性
    console.log(div_0.attributes);
    console.log(div_0.attributes['id']);

    // 自定义属性：data-***
    // dataset：只能获取data-***的属性
    console.log(div_1.dataset);
    console.log(div_1.dataset.yuan);
    console.log(div_1.dataset['index']);
</script>

二、DOM操作属性

案例1：密码可见

<input type="password" id="pwd">
<input type="button" value="eye" id="btnEye" onclick="test()">
<script>
    var pwd = document.getElementById('pwd');
    // 第一种方式：
    /*var eyeBtn = document.getElementById('btnEye');
    eyeBtn.onclick=function(){
        if(pwd.type=="password"){
            pwd.type="text"
        }else{
            pwd.type="password"
        }
    }*/
    // 第二种方式：
    function test(){
        if(pwd.type=="password"){
            pwd.type="text"
        }else{
            pwd.type="password"
        }
    }
</script>

效果图： 

案例2：全选与反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选反选</title>
    <style>
        ul{list-style: none;}
    </style>
</head>
<body>
    <p>
        <input type="checkbox" name="" id="selectAll">全选/全不选
    </p>
    <hr>
    <ul class="shop">
        <li><input type="checkbox" name="" id="">苹果</li>
        <li><input type="checkbox" name="" id="">香蕉</li>
        <li><input type="checkbox" name="" id="">葡萄</li>
        <li><input type="checkbox" name="" id="">菠萝</li>
        <li><input type="checkbox" name="" id="">梨</li>
    </ul>
    <script>
        var selectAll = document.querySelector('#selectAll');
        console.log(selectAll);
        // 获取所有的input标签
        var inputAll = document.querySelectorAll('.shop input');
        console.log(inputAll);
        selectAll.onclick=function(){
            // alert(selectAll.checked)
            // 循环遍历出ul中的所有input标签
            for(var i=0;i<inputAll.length;i++){
                // console.log(inputAll[i]);
                inputAll[i].checked=selectAll.checked
            }
        }
        // 给每一个水果选项绑定一个单击事件
        for(var i=0;i<inputAll.length;i++){
            // 绑定一个单击事件
            inputAll[i].onclick=function(){
                // alert('aa')
                var count = 0;//用来统计被选中的input标签的个数
                for(var m=0;m<inputAll.length;m++){
                    if(inputAll[m].checked==true){
                        count++
                    }
                }
                // 如果count的值等于水果的个数，全选要选中
                if(count==inputAll.length){
                    selectAll.checked = true
                }else{
                    selectAll.checked = false
                }
            }
        }
    </script>
</body>
</html>

效果图：

 

 

# javascript # 前端 # 开发语言
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

Redis开源社区持续壮大，华为云为Valkey项目注入新的活力

avatar 华为云开发者联盟
cover

CCE云原生混部场景下的测试案例

avatar 华为云开发者联盟
cover

详解数仓的3A安全能力

avatar 华为云开发者联盟