javascript学习笔记(二十) 获得和设置元素的特性(属性)


Posted in Javascript onJune 20, 2012

本节html以下面的为例

<div id="myDiv" class="bd" title="我是div"> 
<img id="img1" /> 
<a id="myA" href = "http://www.baidu.com">百度</a> 
</div>

1.通过HTMLElement类型(对象)的属性获得和设置元素特性
var div = document.getElementById("myDiv"); 
var img = document.getElementById("img1"); 
var a = document.getElementById("myA"); 
//取得元素特性 
alert(div.id); //"myDiv" 
alert(div.className); //"bd",这里不是div.class,是因为class是保留关键字 
alert(div.title); //"我是div" 
alert(a.href); //http://www.baidu.com 
//设置元素特性 
div.id = "myDiv2"; //id改为"myDiv2" 
div.className = "ft"; //class改为"ft",如果存在名为"ft"的样式,会立刻变为"ft"样式,浏览器会立刻反应出来 
div.title = "我是myDiv2"; //title改为"我是myDiv2" 
div.align = "center"; //设置居中对齐 
img.src ="images/img1.gif"; //设置图片路径 
a.innerHTML ="新浪"; //"百度"改为"新浪" 
a.href = "http://www.sina.com.cn"; //重新设置超链接

2.通过getAttribute()、setAttribute()和removeAttribute() 方法,获取、设置、移除元素的特性(不推荐使用,前两个方法IE6,7中有异常,第三个方法IE6不支持,设置自定义特性时可以使用)
getAttribute() 方法,用来获取元素特性。接受一个参数,即要获得元素的特性名
setAttribute() 方法,用来设置元素特性。接受两个参数,即要获得元素的特性名和特性值
removeAttribute() 方法,用来移除元素的特性。接受一个参数,即要移除元素的特性名
var div = document.getElementById("myDiv"); 
var img = document.getElementById("img1"); 
var a = document.getElementById("myA"); 
//取得元素特性 
alert(div.getAttribute("id")); //"myDiv" 
alert(div.getAttribute("class")); //"bd",注意这里是class,而不是className,与上面不同 
alert(div.getAttribute("title")); //"我是div" 
alert(a.getAttribute("href")); //http://www.baidu.com 
//设置元素特性 
div.setAttribute("id","myDiv2"); //id改为"myDiv2" 
div.setAttribute("class","ft"); //class改为"ft",这里同样是class,而不是className 
div.setAttribute("title","我是myDiv2"); //title改为"我是myDiv2" 
div.setAttribute("align","center"); //设置居中对齐 
img.setAttribute("src","images/img1.gif"); //设置图片路径 
//移除元素特性 
div.removeAttribute("class"); //移除class特性

3.通过attributes属性,获取、设置、移除元素的特性
var div = document.getElementById("myDiv"); 
//取得元素特性 
alert(div.attributes["id"].nodeValue); //"myDiv" 
//设置元素特性 
div.attributes["id"].nodeValue = "myDiv2"; //id改为"myDiv2" 
//移除元素特性 
div.attributes.removeNamedItem("class"); //移除class特性
Javascript 相关文章推荐
Javascript 对象的解释
Nov 24 Javascript
js 小贴士一星期合集
Apr 07 Javascript
监控 url fragment变化的js代码
Apr 19 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
Mar 18 Javascript
js打造数组转json函数
Jan 14 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
Apr 25 Javascript
js加减乘除精确运算方法实例代码
Jan 17 Javascript
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 #Javascript
javascript学习笔记(十八) 获得页面中的元素代码
Jun 20 #Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 #Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 #Javascript
javascript学习笔记(十五) js间歇调用和超时调用
Jun 20 #Javascript
javascript学习笔记(十四) window对象使用介绍
Jun 20 #Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 #Javascript
You might like
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
基于JQuery的密码强度验证代码
2010/03/01 Javascript
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
Angular项目中$scope.$apply()方法的使用详解
2017/07/26 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
python实现文本文件合并
2015/12/29 Python
python的unittest测试类代码实例
2017/12/07 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
PIP和conda 更换国内安装源的方法步骤
2020/09/21 Python
python collections模块的使用
2020/10/16 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
super关键字的用法
2012/04/10 面试题
学生党员思想汇报
2013/12/28 职场文书
优秀员工年终发言演讲稿
2014/01/01 职场文书
校庆活动方案
2014/03/31 职场文书
C++程序员求职信范文
2014/04/14 职场文书
篮球比赛口号
2014/06/10 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
数学备课组工作总结
2015/08/12 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书
Python实现单例模式的5种方法
2021/06/15 Python
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android