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 相关文章推荐
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
javascript replace()正则替换实现代码
Feb 26 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
BootStrap下jQuery自动完成的样式调整
May 30 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
Dec 22 Javascript
解析Json字符串的三种方法日常常用
May 02 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
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
PHP4之COOKIE支持详解
2006/10/09 PHP
谈谈PHP的输入输出流
2007/02/14 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
yii用户注册表单验证实例
2015/12/26 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
javascript常用方法总结
2015/05/14 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
基于jquery实现省市联动特效
2015/12/17 Javascript
10个JavaScript中易犯小错误
2016/02/14 Javascript
jQuery实现HTML表格单元格的合并功能
2016/04/06 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
基于vue手写tree插件的那点事儿
2019/08/20 Javascript
JavaScript实现通讯录功能
2020/12/27 Javascript
python各种语言间时间的转化实现代码
2016/03/23 Python
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
python enumerate函数的使用方法总结
2017/11/15 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
python使用自定义钉钉机器人的示例代码
2020/06/24 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
工商企业管理专业自荐信范文
2014/04/12 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
2014年环卫工作总结
2014/11/22 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
贷款收入证明格式
2015/06/24 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python
python实现MD5进行文件去重的示例代码
2021/07/09 Python