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 相关文章推荐
jquery选择器使用详解
Apr 08 Javascript
js单词形式的运算符
May 06 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Sep 26 Javascript
Javascript中拼接大量字符串的方法
Feb 05 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
了解javascript中let和var及const关键字的区别
May 24 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 Javascript
ant design实现圈选功能
Dec 17 Javascript
vue项目中微信登录的实现操作
Sep 08 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
PHP实现数组递归转义的方法
2014/08/28 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
BootStrap中Datepicker控件带中文的js文件
2016/08/10 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
Python读取Excel的方法实例分析
2015/07/11 Python
python TCP Socket的粘包和分包的处理详解
2018/02/09 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
基于python实现对文件进行切分行
2020/04/26 Python
python是怎么被发明的
2020/06/15 Python
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
业务经理的岗位职责
2013/11/16 职场文书
装饰资料员岗位职责
2013/12/30 职场文书
产品促销活动策划书
2014/01/15 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
成龙霸王洗发水广告词
2014/03/14 职场文书
科研课题实施方案
2014/03/18 职场文书
现实表现材料范文
2014/12/23 职场文书
2015年护士节活动总结
2015/02/10 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
详解Python函数print用法
2021/06/18 Python
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏
MySQL事务的隔离级别详情
2022/07/15 MySQL