JS获取元素属性和自定义属性

昨天有同事问我,怎么获取自定义元素的属性,我意识到这个确实是个 问题,所有总结一下自己的心得。

获取元素的属性分为两种类型:


1-获取元素常见的属性(class,id,type,value…)

2-获取自定义的元素的属性(data-value,data-mess…)


获取元素的属性,设置元素的属性:

1-原生JS

       设置属性 .setAttribute("属性","值")
       获取属性 .getAttribute("属性")

2-jquery

       设置属性 .attr("属性","值")
       获取属性 .attr("属性")

下面通过一个例子介绍一下,如何获取和设置元素的属性;

<!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">
     
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>获取元素属性</title>
        <style>
            * {
                margin:0;
                padding:0;
                list-style:none;
            }
        </style>
    </head>
     
    <body>
        <div id="mayouchen">
            <div style="background:red;height:20px">元素属性获取</div>
            <div class="test1">
                <p id="demo">点击按钮来设置按钮的 type,id,class 属性。</p>
                <input value="OK" class="mayouchen">
                <button onclick="mayouchen1()">获取元素属性</button>
            </div>
            <div style="background:green;height:20px">自定义属性获取</div>
            <div class="test2">
                <div id="tree" data-leaves="47" data-plant-height="2.4m">我是被获取的元素</div>
                <button onclick="mayouchen2()">获取自定义元素属性</button>
            </div>
        </div>
        <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
        <script>
            $(function() {
 
            });
 
            function mayouchen1() {
                document.getElementsByTagName("INPUT")[0].setAttribute("type", "button");
                document.getElementsByTagName("INPUT")[0].setAttribute("class", "mayouchen");
                document.getElementsByTagName("INPUT")[0].setAttribute("id", "test1");
 
                document.getElementsByTagName("INPUT")[0].getAttribute("id");
                document.getElementsByTagName("INPUT")[0].getAttribute("class");
 
                console.log("id=====" + document.getElementsByTagName("INPUT")[0].getAttribute("id"));
                console.log("class=====" + document.getElementsByTagName("INPUT")[0].getAttribute("class"));
            }
 
            function mayouchen2() {
                var tree = document.getElementById("tree");
                //getAttribute()取值属性
                console.log("data-leaves======" + tree.getAttribute("data-leaves"));
                console.log("data-plant-height===============" + tree.getAttribute("data-plant-height"));
 
                //setAttribute()赋值属性
                tree.setAttribute("data-come", "49");
 
                //data-前缀属性可以在JS中通过dataset取值,更加方便
                console.log("通过dataset获得data-leaves====" + tree.dataset.leaves);
                console.log("通过dataset获得data-plant-height====" + tree.dataset.plantHeight);
 
                //注意在这里连字符的访问时,属性要写成驼峰形式
            }
        </script>
    </body>
 
</html>

上面有两个test, test1是测试元素常见属性,test2是测试元素自定义属性

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 撸撸猫 设计师:C马雯娟 返回首页