码迷,mamicode.com
首页 > 其他好文 > 详细

属性的获取和设置

时间:2020-03-28 13:10:53      阅读:65      评论:0      收藏:0      [点我收藏+]

标签:OLE   html   head   getattr   setattr   自定义   方法   --   获取   

元素节点原有的属性:id class title style  dir等等
<!DOCTYPE html>
<html>

 

<head>

 

</head>

 

<body>
    <div id="box" name="bird" title="其不知道啊" a="world">

 

    </div>

 

    <script>
        var div = document.querySelector(‘#box‘);

 

        //    1.利用getAttributes方法获取元素节点某个属性的值
        var res = div.getAttribute(‘title‘);
        console.log(res);

 

        //    2.利用属性节点的nodeValue获取属性值
        var arr = div.getAttributeNode(‘title‘);//获取属性节点
        console.log(arr);
        console.log(arr.nodeValue);

 

        //    利用点语法,元素节点.属性名称;(常用)
        console.log(div.title);
        console.log(div.name);//undefined

 

        //利用中括号,元素节点[‘属性名称‘];(常用)
        console.log(div[‘title‘]);
        console.log(div[‘id‘]);

 

        // 注意:点语法后面不可以加变量,然而中括号后面可以加变量
        var str = ‘title‘;
        console.log(div.str);//undefined
        console.log(div[str]);
 
       //自定义属性怎么操作(暂时没搞明白)
        console.log(div.getAttribute(‘a‘));
        console.log(div.getAttributeNode(‘a‘).nodeValue);
        console.log(div.a);
        console.log(div[‘a‘]);


        //可以使用setAttribute方法设置属性值,
        // 格式:元素节点.setAttribute(‘属性名称‘,‘属性值‘);
        console.log(‘------------------------------------------------‘);
        div.setAttribute(‘title‘, ‘我也不知道你要刚莫斯啊‘);
        div.setAttribute(‘a‘, ‘world‘);//可以支持自定义属性
        console.log(div.title);
        console.log(div.a);//undefined
    </script>
</body>

 

</html>

属性的获取和设置

标签:OLE   html   head   getattr   setattr   自定义   方法   --   获取   

原文地址:https://www.cnblogs.com/1998Archer/p/12586826.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!