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 相关文章推荐
XML的代替者----JSON
Jul 21 Javascript
可以用来调试JavaScript错误的解决方案
Aug 07 Javascript
javascript arguments使用示例
Dec 16 Javascript
jquery原理以及学习技巧介绍
Nov 11 Javascript
javascript实现网站加入收藏功能
Dec 16 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
node.js express中app.param的用法详解
Jul 16 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
vue实现nav导航栏的方法
Dec 13 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
JavaScript canvas基于数组生成柱状图代码实例
Mar 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
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
浅析document.createDocumentFragment()与js效率
2013/07/08 Javascript
javascript arguments使用示例
2014/12/16 Javascript
jQuery通过扩展实现抖动效果的方法
2015/03/11 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
python正则表达式中的括号匹配问题
2014/12/14 Python
使用Python神器对付12306变态验证码
2016/01/05 Python
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
美国中西部家用医疗设备商店:Med Mart(轮椅、踏板车、升降机等)
2019/04/26 全球购物
美国眼镜网站:LensCrafters
2020/01/19 全球购物
播音主持女孩的自我评价分享
2013/11/20 职场文书
上班早退检讨书
2014/01/09 职场文书
文明礼仪小标兵事迹
2014/01/12 职场文书
七年级政治教学反思
2014/02/03 职场文书
《明天,我们毕业》教学反思
2014/04/24 职场文书
投标人廉洁自律承诺书
2014/05/26 职场文书
奥林匹克运动会口号
2014/06/19 职场文书
基层党组织整改方案
2014/10/25 职场文书
先进教师事迹材料
2014/12/16 职场文书
房产证明范本
2015/06/19 职场文书
Java8中接口的新特性使用指南
2021/11/01 Java/Android
Python开发五子棋小游戏
2022/04/28 Python