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 相关文章推荐
在IE中调用javascript打开Excel的代码(downmoon原作)
Apr 02 Javascript
JavaScript获取页面上被选中文字的方法技巧
Mar 13 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
May 18 Javascript
Web 开发中Ajax的Session 超时处理方法
Jan 19 Javascript
get  post jsonp三种数据交互形式实例详解
Aug 25 Javascript
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
详解ECMAScript2019/ES10新属性
Dec 06 Javascript
vue常用高阶函数及综合实例
Feb 25 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
php,不用COM,生成excel文件
2006/10/09 PHP
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
PHP自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
斜45度寻路实现函数
2009/08/20 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
基于jquery实现ajax无刷新评论
2020/08/19 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
在python中bool函数的取值方法
2018/11/01 Python
Python 从相对路径下import的方法
2018/12/04 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
Java和Javasciprt的区别
2012/09/02 面试题
工程现场管理求职自荐信
2013/10/02 职场文书
英语专业学子个人的自我评价
2013/10/02 职场文书
舞蹈毕业生的自我评价
2014/03/05 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python
nginx配置限速限流基于内置模块
2022/05/02 Servers
一文解答什么是MySQL的回表
2022/08/05 MySQL