首页 > 编程笔记 > JavaScript笔记
阅读:67
JS setAttribute()方法:设置元素的属性值
在 JavaScript 中,使用元素的 setAttribute() 方法可以设置元素的属性值。用法如下:
setAttribute(name, value)
参数 name 和 value 分别表示属性名称和属性值。属性名和属性值必须以字符串的形式进行传递。如果元素中存在指定的属性,它的值将被刷新;如果不存在,则 setAttribute() 方法将为元素创建该属性并赋值。示例1
下面示例分别为页面中 div 元素设置 title 属性。
<div id="red">红盒子</div>
<div id="blue">蓝盒子</div>
<script>
var red = document.getElementById("red"); //获取红盒子的引用
var blue= document.getElementById("blue"); //获取蓝盒子的引用
red.setAttribute("title", "这是红盒子"); //为红盒子对象设置title属性和值
blue.setAttribute("title", "这是蓝盒子"); //为蓝盒子对象设置title属性和值
</script>
示例2
下面示例定义了一个文本节点和元素节点,并为一级标题元素设置 title 属性,最后把它们添加到文档结构中。var hello = document.createTextNode("Hello World!"); //创建一个文本节点 var h1 = document.createElement("h1"); //创建一个一级标题 h1.setAttribute("title", "你好,欢迎光临!"); //为以及标题定义title 属性 h1.appendChild(hello); //把文本节点增加到一级标题中 document.body.appendChild(h1); //把一级标题增加到文档
示例3
也可以使用快捷方法设置 HTML DOM 文档中元素的属性值。<label id="label1">文本框: <input type="text" name="textfield" id="textfield" /> </label> <script> var label1 = document.getElementById("label1"); label.className = "class1"; label.htmlFor = "textfield"; </script>DOM 支持使用 getAttribute() 和 setAttribute() 方法读写自定义属性,不过 IE 6.0 及其以下版本浏览器对其的支持不是很完善。
示例4
直接使用 className 添加类样式,会覆盖掉元素原来的类样式。这时可以采用叠加的方式添加类。<div id="red">红盒子</div> <script> var red = document.getElementById("red"); red.className = "red"; red.className += "blue"; </script>
示例5
使用叠加的方式添加类也存在问题,这样容易添加大量重复的类。为此,定义一个检测函数,判断元素是否包含指定的类,然后再决定是否添加类。<script> function hasClass (element, className) { //检测类名函数 var reg = new RegExp('(\\s|^)' + className + '(\\s|$)'); return reg.test(element.className); //使用正则检测是否有相同的样式 } function addClass (element, className) { //添加类名函数 if (! hasClass (element, className)) element.className += ' ' + className; } </script> <div id="red">红盒子</div> <script> var red = document.getElementById("red"); addClass(red, 'red'); addClass(red, 'blue'); </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视频