JavaScript中setAttribute用法介绍


Posted in Javascript onJuly 20, 2013

setAttribute(string name, string value):增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。
1、样式问题
setAttribute("class", value)中class是指改变"class"这个属性,所以要带引号。
vName代表对样式赋值。
例如:

var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("name", "q");
input.setAttribute("class",bordercss);

输出时:<input type="text" name="q" class="bordercss">,即,input控件具有bordercss样式属性
注意:class属性在W3C DOM中扮演着很重要的角色,但由于浏览器差异性仍然存在。
使用setAttribute("class", vName)语句动态设置Element的class属性在firefox中是行的通的,但在IE中却不行。因为使用IE内核的浏览器不认识"class",要改用"className";
同样,firefox 也不认识"className"。所以常用的方法是二者兼备:
element.setAttribute("class", value); //for firefox
element.setAttribute("className", value); //for IE

2、方法属性等问题
例如:
var bar = document.getElementById("testbt");
bar.setAttribute("onclick", "javascript:alert('This is a test!');");

这里利用setAttribute指定e的onclick属性,简单,很好理解。
但是IE不支持,IE并不是不支持setAttribute这个函数,而是不支持用setAttribute设置某些属性,例如对象属性、集合属性、事件属性,也就是说用setAttribute设置style和onclick这些属性在IE中是行不通的。
为达到兼容各种浏览器的效果,可以用点符号法来设置Element的对象属性、集合属性和事件属性。
document.getElementById("testbt").className = "bordercss";
document.getElementById("testbt").style.cssText = "color: #00f;";
document.getElementById("testbt").style.color = "#00f";
document.getElementById("testbt").onclick= function () { alert("This is a test!"); }
Javascript 相关文章推荐
jquery提示 &quot;object expected&quot;的解决方法
Dec 13 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
Aug 01 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
推荐5 个常用的JavaScript调试技巧
Jan 08 Javascript
jQuery中outerWidth()方法用法实例
Jan 19 Javascript
JavaScript比较两个对象是否相等的方法
Feb 06 Javascript
Jquery实现上下移动和排序代码
Oct 17 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
AngularJS 异步解决实现方法
Jun 12 Javascript
jquery动态添加删除div 具体实现
Jul 20 #Javascript
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 #Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 #Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 #Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 #Javascript
javascript判断非数字的简单例子
Jul 18 #Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 #Javascript
You might like
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
2014/12/19 Javascript
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
JavaScript自定义文本框光标
2017/03/05 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
django解决跨域请求的问题详解
2019/01/20 Python
详解python中的闭包
2020/09/07 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
印度尼西亚综合购物网站:Lazada印尼
2016/09/07 全球购物
流行文化收藏品:Sideshow(DC漫画,星球大战,漫威)
2019/03/17 全球购物
高级护理专业毕业生推荐信
2013/12/25 职场文书
幼儿园老师寄语
2014/04/03 职场文书
活动策划求职信模板
2014/04/21 职场文书
大学生就业求职信
2014/06/12 职场文书
护理专科学生自荐书
2014/07/05 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
文明班级申报材料
2014/12/24 职场文书
表扬稿格式范文
2015/01/16 职场文书
汽车销售合同文本
2019/08/08 职场文书
在CSS中使用when/else的方法
2022/01/18 HTML / CSS
Java异常体系非正常停止和分类
2022/06/14 Java/Android