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 相关文章推荐
面向对象的编程思想在javascript中的运用上部
Nov 20 Javascript
jquery中文乱码的多种解决方法
Jun 21 Javascript
Jquery 在页面加载后执行的几种方式
Mar 14 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
批量修改标签css样式以input标签为例
Jul 31 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
js中常用的Math方法总结
Jan 12 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 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
晶体管来复再生式二管收音机
2021/03/02 无线电
php设计模式 Delegation(委托模式)
2011/06/26 PHP
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
jQuery动态添加
2016/04/07 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python中元组,列表,字典的区别
2017/05/21 Python
Python 操作文件的基本方法总结
2017/08/10 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
python redis 删除key脚本的实例
2019/02/19 Python
python实现小世界网络生成
2019/11/21 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
肯尼迪就职演说稿
2013/12/31 职场文书
《九寨沟》教学反思
2014/04/08 职场文书
房展策划方案
2014/06/07 职场文书
个人四风问题对照检查材料
2014/09/26 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
部门2015年度工作总结
2015/04/29 职场文书
社区活动总结范文
2015/05/07 职场文书
Java实现超大Excel文件解析(XSSF,SXSSF,easyExcel)
2022/07/15 Java/Android
Rust中的Struct使用示例详解
2022/08/14 Javascript