首页 > 编程笔记 > JavaScript笔记
阅读:61
JS getAttribute()方法:读取元素的属性值
在 JavaScript 中,使用元素的 getAttribute() 方法可以读取指定属性的值。用法如下:
使用元素的 attributes 属性、getAttributeNode() 方法可以返回对应属性节点。
对于 class 属性,则必须使用 className 属性名,因为 class 是 JavaScript 的保留字;对于 for 属性,则必须使用 htmlFor 属性名,这与 CSS 脚本中 float 和 text 属性被改名为 cssFloat 和 cssText 是一个道理。
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>
所有教程
- socket
- Python基础教程
- C#教程
- MySQL函数
- MySQL
- C语言入门
- C语言专题
- C语言编译器
- C语言编程实例
- GCC编译器
- 数据结构
- C语言项目案例
- C++教程
- OpenCV
- Qt教程
- Unity 3D教程
- UE4
- STL
- Redis
- Android教程
- JavaScript
- PHP
- Mybatis
- Spring Cloud
- Maven
- vi命令
- Spring Boot
- Spring MVC
- Hibernate
- Linux
- Linux命令
- Shell脚本
- Java教程
- 设计模式
- Spring
- Servlet
- Struts2
- Java Swing
- JSP教程
- CSS教程
- TensorFlow
- 区块链
- Go语言教程
- Docker
- 编程笔记
- 资源下载
- 关于我们
- 汇编语言
- 大数据
- 云计算
- VIP视频