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 相关文章推荐
Gird事件机制初级读本
Mar 10 Javascript
jQuery getJSON 处理json数据的代码
Jul 26 Javascript
JS两种定义方式的区别、内部原理
Nov 21 Javascript
15位和18位身份证JS校验的简单实例
Jul 18 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
jQuery ajax实现省市县三级联动
Mar 07 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 Javascript
vue实现简单的登录弹出框
Oct 26 Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
何时使用Map来代替普通的JS对象
Apr 29 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 CLI实现简单的数据库实时监控调度
2009/07/01 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
在JavaScript中处理字符串之link()方法的使用
2015/06/08 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
完美实现js焦点轮播效果(一)
2017/03/07 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
Django框架实现逆向解析url的方法
2018/07/04 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
Python hashlib模块的使用示例
2020/10/09 Python
pymysql模块使用简介与示例
2020/11/17 Python
HTML5 input元素类型:email及url介绍
2013/08/13 HTML / CSS
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
盛大二次面试题
2016/11/18 面试题
科室工作的个人自我评价
2013/10/30 职场文书
精彩的英文自荐信
2014/01/30 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
python百行代码实现汉服圈图片爬取
2021/11/23 Python
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技