首页 > 编程笔记 > JavaScript笔记 阅读:587

JS getAttribute()方法:读取元素的属性值

JavaScript 中,使用元素的 getAttribute() 方法可以读取指定属性的值。用法如下:

getAttribute(name)

参数 name 表示属性名称。

使用元素的 attributes 属性、getAttributeNode() 方法可以返回对应属性节点。

示例1

下面示例访问红色盒子和蓝色盒子,然后读取这些元素所包含的 id 属性值。
<div id="red">红盒子</div>
<div id="blue">蓝盒子</div>
<script>
    var red = document.getElementById("red");  //获取红色盒子
    console.log(red.getAttribute("id"));  //显示红色盒子的id属性值
    var blue = document.getElementById("blue");  //获取蓝色盒子
    console.log(blue.getAttribute("id"));  //显示蓝色盒子的id属性值
</script>

示例2

HTML DOM 也支持使用点语法读取属性值,使用比较简便,也获得了所有浏览器的支持。
var red = document.getElementById("red");
console.log(red.id);
var blue = document.getElementById("blue");
console.log(blue.id);

对于 class 属性,则必须使用 className 属性名,因为 class 是 JavaScript 的保留字;对于 for 属性,则必须使用 htmlFor 属性名,这与 CSS 脚本中 float 和 text 属性被改名为 cssFloat 和 cssText 是一个道理。

示例3

使用 className 读写样式类。
<label id="label1" class="class1" for="textfield">文本框:
    <input type="text" name="textfield" id="textfield" />
</label>
<script>
    var label = document.getElementById("label1");
    console.log(label.className);
    console.log(label.htmlFor);
</script>

示例4

对于复合类样式,需要使用 split() 方法劈开返回的字符串,然后遍历读取类样式。
<div id="red" class="red blue">红盒子</div>
<script>
    //所有类名生成的数组
    var classNameArray = document.getElementById("red").className.split(" ");
    for (var i in classNameArray) {  //遍历数组
        console.log(classNameArray[i]);  //当前class名
    }
</script>

爱面试的程序媛,一个分享面试经验的公众号。跟着站长一起学习,每天都有进步。

通俗易懂,深入浅出,定时分享程序员面试的那点事。

面试如何造火箭?工作如何拧螺丝?都在这个公号哦。

扫描二维码关注公众号,免费领取价值 1000 元的求职面试资料(限时免费)!

当你决定关注「爱面试的程序媛」,你已然超越了90%的程序员!

爱面试的程序媛二维码
微信扫描二维码关注

所有教程

优秀文章