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 相关文章推荐
JS获取当前网址、主机地址项目根路径
Nov 19 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 Javascript
JS实现点击循环切换显示内容的方法
Oct 19 Javascript
javascript中的event loop事件循环详解
Dec 14 Javascript
Vue-cli3多页面配置详解
Mar 22 Javascript
查找Vue中下标的操作(some和findindex)
Aug 12 Javascript
jQuery插件实现图片轮播效果
Oct 19 jQuery
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 sprintf()函数让你的sql操作更安全
2008/07/23 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
PHP输出XML到页面的3种方法详解
2013/06/06 PHP
关于crontab的使用详解
2013/06/24 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
php微信开发之图片回复功能
2018/06/14 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
php支付宝APP支付功能
2020/07/29 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
详解如何使用 vue-cli 开发多页应用
2017/12/16 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
JS实现图片切换特效
2019/12/23 Javascript
linux下python抓屏实现方法
2015/05/22 Python
python 接收处理外带的参数方法
2018/12/03 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
Python如何输出百分比
2020/07/31 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
Vince官网:全球著名设计师品牌,休闲而优雅的服饰
2017/01/15 全球购物
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
程序员求职信
2014/04/16 职场文书
条幅标语大全
2014/06/20 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书