JavaScript属性值操作

最新推荐文章于 2020-06-09 20:47:26 发布

dancheng_work

最新推荐文章于 2020-06-09 20:47:26 发布

阅读量266

点赞数

分类专栏： # JavaScript

本文链接：https://blog.csdn.net/dancheng1/article/details/77018236

版权

JavaScript 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

1、属性值操作

1、获取属性值

itnode.属性名称; //只能操作w3c规定的属性

itnode.getAttribute(属性名称); //规定的和自定义的都可以获取

2、设置属性值

itnode.属性名称 = 值; //只能操作w3c规定的属性

itnode.setAttribute(名称，值); //规定的和自定义的都可以设置

<body>
    <h2>属性值操作</h2>
    <a href="http://www.baidu.com"  addr='beijing' target="_blank">百度</a>
    <input type="button" value="修改属性" οnclick="f1()">
</body>
</html>
<script type="text/javascript">
    var baidu = document.getElementsByTagName('a')[0];
    //获得属性的信息
    console.log(baidu.href);
    console.log(baidu.target);
    console.log(baidu.addr);
    console.log('\n');
    console.log(baidu.getAttribute('addr'));
    console.log(baidu.getAttribute('target'));
    console.log(baidu.getAttribute('href'));
    console.log('----------------------------------');
    console.log('----------------------------------');
    
    //设置属性的信息
    function f1() {
        baidu.href = "http://www.163.com";
        baidu.target = "uuuu";
        //baidu.addr = "tianjin"   //这样设置没有效果
        //属性修改，有就更新，没有就创建
        baidu.setAttribute('addr', "shanghai");
        baidu.setAttribute('height', "170");
    }
</script>

效果图：

2、属性结点获取

var attrlist = itnode.attributes; //返回对应节点内部的全部属性信息，数组列表形式返回

attrlist.属性名称; //获得具体属性节点

nodeType 判断结点类型

1->元素结点

2->属性结点

3->文本结点

9->document结点

<body>
    <h2>属性结点获取</h2>
    <input  type="text"  name="username" id="username" value="tom"  class="orange" />
    <input type="button" value="修改属性" οnclick="f1()">
</body>
</html>
<script type="text/javascript">
    var username = document.getElementById('username');
    //获取username的全部属性
    var attrs = username.attributes;
    console.log(attrs);
    console.log(attrs.id);
    console.log(attrs.class);
    console.log(username.nodeType);
    //nodeType 判断结点类型  1->元素结点   2->属性结点   3->文本结点   9->document结点
</script>

效果图：

dancheng_work

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript属性值操作

1、属性值操作http://www.baidu.com" addr='beijing' target="_blank">百度1、获取属性值itnode.属性名称; //只能操作w3c规定的属性itnode.getAttribute(属性名称); //规定的和自定义的都可以获取2、设置属性值itnode.属性名称 =值; //只能操作w3c规
复制链接

扫一扫

专栏目录