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 相关文章推荐
js下判断 iframe 是否加载完成的完美方法
Oct 26 Javascript
Extjs TimeField 显示正常时间格式的代码
Jun 28 Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
浅谈gulp创建完整的项目流程
Dec 20 Javascript
微信小程序实现多选删除列表数据功能示例
Jan 15 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
详解解决小程序中webview页面多层history返回问题
Aug 20 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 Javascript
JavaScript流程控制(分支)
Dec 06 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
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
PHP中的Session对象如何使用
2015/09/25 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
php自动加载代码实例详解
2021/02/26 PHP
JavaScript 动态将数字金额转化为中文大写金额
2009/05/14 Javascript
javascript hasFocus使用实例
2010/06/29 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
python缩进区别分析
2014/02/15 Python
Python使用multiprocessing创建进程的方法
2015/06/04 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
Python selenium使用autoIT上传附件过程详解
2020/05/26 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
幼儿园小班教师寄语
2014/04/03 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
房屋授权委托书范本
2014/10/07 职场文书
起诉意见书范文
2015/05/19 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript