JavaScript获取对象属性和设置对象属性总计

最新推荐文章于 2023-09-13 13:05:24 发布

YangVijay

最新推荐文章于 2023-09-13 13:05:24 发布

阅读量2.4k

点赞数

分类专栏： web编程文章标签： javascript 对象属性

本文链接：https://blog.csdn.net/ywjatjd/article/details/51392544

版权

web编程专栏收录该内容

7 篇文章 0 订阅

订阅专栏

通过id、classname以及tagname，利用document的getElementById、getElementsByClassName、getElementsByTagName，我们可以获取到文档树中的任意元素节点对象。有了节点对象，我们可能会对其属性进行查看或者修改。本文总结了JavaScript获取和设置对象属性的方法。

1. 获取属性

getAttribute
输入：属性的名字，字符串
输出：属性的值
注：getAttribute是元素节点对象的方法，不是document对象的方法

<script> 
    var obj = document.getElementById("header");//获取节点对象
    var attr = obj.getAttribute("title");//获取title属性
    console.log("the title of header:"+attr);   
</script>
//结果

这里写图片描述

2. 设置属性

setAttribute
输入：属性的名字，字符串
输出：无
注：setAttribute同getAttribute一样，是元素节点对象的方法，不是document对象的方法，不能用document调用

    var obj = document.getElementById("header");
    var attr = obj.getAttribute("title");
    console.log("the title of header before change:"+attr); 

    obj.setAttribute("title","the title has been changed");
    console.log("the title of header after change:"+obj.getAttribute("title"));
//结果

这里写图片描述

以上测试代码对应的HTML代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getAttribute</title>
    <style type="text/css">
        #header{
            width:400px;
            height:300px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="header" title="this is the header">
        </div>
    </div>
</body>
<script> 
//...   
</script>
</html>

YangVijay

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
JavaScript获取对象属性和设置对象属性总计

通过id、classname以及tagname，利用document的getElementById、getElementsByClassName、getElementsByTagName，我们可以获取到文档树中的任意元素节点对象。有了节点对象，我们可能会对其属性进行查看或者修改。本文总结了JavaScript获取和设置对象属性的方法。1. 获取属性getAttribute
复制链接

扫一扫