javascript 三种方法实现获得和设置以及移除元素属性
2013-03-20 00:00
691 查看
以下面的html为例
1.通过HTMLElement类型(对象)的属性获得和设置元素特性
2.通过getAttribute()、setAttribute()和removeAttribute() 方法,获取、设置、移除元素的特性(不推荐使用,前两个方法IE6,7中有异常,第三个方法IE6不支持,设置自定义特性时可以使用)
getAttribute() 方法,用来获取元素特性。接受一个参数,即要获得元素的特性名
setAttribute() 方法,用来设置元素特性。接受两个参数,即要获得元素的特性名和特性值
removeAttribute() 方法,用来移除元素的特性。接受一个参数,即要移除元素的特性名
3.通过attributes属性,获取、设置、移除元素的特性
<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 三种方法实现获得和设置以及移除元素属性
- javascript获得和设置以及移除元素属性的三个方法
- javascript获得和设置以及移除元素属性的三个方法
- CSS实现父级元素属性display为block的元素垂直和水平居中的三种方法
- vue获取DOM元素并设置属性的两种实现方法
- 【JavaScript】DOM(二)获取元素+设置属性的六种方法
- 认识Javascript中的Document对象以及如何用三种方法访问元素对象
- DOM(包括获取元素节点的方法以及获取和设置元素节点的属性)
- javascript学习笔记(二十) 获得和设置元素的特性(属性)
- javascript学习笔记(二十) 获得和设置元素的特性(属性)
- javascript学习笔记(二十) 获得和设置元素的特性(属性)
- 快速获取/设置iframe内对象元素的几种js实现方法
- javascript实现私有属性私有方法
- javascript实现图片延迟加载方法汇总(三种方法)
- javascript通过获取html标签属性class实现多选项卡的方法
- 创建Bean的三种方式 在大多数情况下,Spring容器直接通过new关键字调用构造器来创建Bean实例,而class属性指定Bean实例的实现类,但这不是实例化Bean的唯一方法。实际上,Sprin
- javascript实现在某个元素上阻止鼠标右键事件的方法和实例
- JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
- js:for循环ul/li,获取当前被点击元素的id,以及给其他li设置属性