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 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
JsDom 编程小结
Aug 09 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 Javascript
JQuery与JS里submit()的区别示例介绍
Feb 17 Javascript
js/jquery获取文本框输入焦点的方法
Mar 04 Javascript
JS实现简单易用的手机端浮动窗口显示效果
Sep 07 Javascript
prototype与__proto__区别详细介绍
Jan 09 Javascript
JS实现的简单图片切换功能示例【测试可用】
Feb 14 Javascript
jQuery实现键盘回车搜索功能
Jul 25 jQuery
基于zepto.js实现登录界面
Oct 09 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
selenium+java中用js来完成日期的修改
Oct 31 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
php INI配置文件的解析实现分析
2011/01/04 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
javascript 常用方法总结
2009/06/03 Javascript
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
2017/01/04 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
Python中的rjust()方法使用详解
2015/05/19 Python
Python编程实现蚁群算法详解
2017/11/13 Python
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
浅谈Django的缓存机制
2018/08/23 Python
python实现桌面托盘气泡提示
2019/07/29 Python
python 3.6.7实现端口扫描器
2019/09/04 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
九年级语文教学反思
2014/02/04 职场文书
采购部经理岗位职责
2014/02/10 职场文书
生物科学专业自荐书
2014/06/20 职场文书
创先争优承诺书
2015/01/20 职场文书
房产遗嘱范本
2015/08/06 职场文书
为什么RedisCluster设计成16384个槽
2021/09/25 Redis
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电
python在package下继续嵌套一个package
2022/04/14 Python
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python