美文网首页
五、js - DOM -06 获取元素属性的几种方式

五、js - DOM -06 获取元素属性的几种方式

作者: 有你相伴一生 | 来源:发表于2018-11-06 17:18 被阅读0次
    用.和[]的形式无法操作元素的自定义属性; getAttribute可以操作元素的自定义属性
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <input type="text" id="text1" value="1111" _name = "miaowei"><br>
    <img src="img/1.png" alt="无图" id="img1" style="width: 100px; height: 100px">
     
    <script>
        window.onload = function () {
            var oText = document.getElementById('text1');
            var oImg = document.getElementById('img1');
            oText.value = '2222';
            alert(oText.value); //2222
     
            oText['value'] = '3333';
            alert(oText['value']); //3333
            alert(oText.getAttribute('value')) //1111
     
            // 设置属性值
            oText.setAttribute('value', '你好,世界');
            alert(oText.getAttribute('value')) // 你好,世界
     
            //移除属性
            oText.removeAttribute('value');
            alert(oText.getAttribute('value')) // null
     
            //用.和[]的形式无法操作元素的自定义属性 ; getAttribute可以操作元素的自定义属性
            alert(oText._name); //undefined
            alert(oText['_name']); //undefined
            alert(oText.getAttribute('_name')); //miaowei
            console.log(oImg.src + ":" + oImg['src'] + oImg.getAttribute('src')); //http://localhost:63342/helloworld/img/1.png
        }
    </script>
     
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:五、js - DOM -06 获取元素属性的几种方式

          本文链接:https://www.haomeiwen.com/subject/maguxqtx.html