javascript 三种方法实现获得和设置以及移除元素属性


Posted in Javascript onMarch 20, 2013

以下面的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 相关文章推荐
控制打印时页眉角的代码
Feb 08 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
js中数组排序sort方法的原理分析
Nov 20 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
Feb 10 Javascript
jQuery导航条固定定位效果实例代码
May 26 jQuery
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
vue和webpack安装命令详解
Jun 15 Javascript
Vue代码整洁之去重方法整理
Aug 06 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 Javascript
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
asp.net中System.Timers.Timer的使用方法
Mar 20 #Javascript
js控制的回到页面顶端goTop的代码实现
Mar 20 #Javascript
让图片旋转任意角度及JQuery插件使用介绍
Mar 20 #Javascript
jquery在Chrome下获取图片的长宽问题解决
Mar 20 #Javascript
javascript中[]和{}对象使用介绍
Mar 20 #Javascript
javascript中节点的最近的相关节点访问方法
Mar 20 #Javascript
javascript中注册和移除事件的4种方式
Mar 20 #Javascript
You might like
php中require和require_once的区别说明
2014/02/27 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
详解如何在Vue项目中发送jsonp请求
2019/10/25 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
2019/11/12 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
[03:18]DOTA2放量测试专访820:希望玩家加入国服大家庭
2013/08/25 DOTA
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
Python入门篇之文件
2014/10/20 Python
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
Python实现的插入排序算法原理与用法实例分析
2017/11/22 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
python处理csv中的空值方法
2018/06/22 Python
Django开发的简易留言板案例详解
2018/12/04 Python
python 多线程重启方法
2019/02/18 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
django中间键重定向实例方法
2019/11/10 Python
python 串行执行和并行执行实例
2020/04/30 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
Marriott国际:万豪国际酒店查询预订
2017/09/25 全球购物
一些网络技术方面的面试题
2014/05/01 面试题
教师职位说明书
2014/07/29 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
Go归并排序算法的实现方法
2022/04/06 Golang