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 相关文章推荐
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 Javascript
js实现连个数字相加而不是拼接的方法
Feb 23 Javascript
JS实现方向键切换输入框焦点的方法
Aug 19 Javascript
Node.js实现JS文件合并小工具
Feb 02 Javascript
javascript每日必学之循环
Feb 19 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
JavaScript实现开关等效果
Sep 08 Javascript
vue双向数据绑定知识点总结
Apr 18 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
JavaScript原型对象原理与应用分析
Dec 27 Javascript
基于javascript实现贪吃蛇小游戏
Nov 25 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
从MySQL数据库表中取出随机数据的代码
2007/09/05 PHP
PHP 调试工具Debug Tools
2011/04/30 PHP
二进制交叉权限微型php类分享
2014/02/07 PHP
PHP 正则表达式常用函数
2014/08/17 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
php实现文本数据导入SQL SERVER
2015/05/17 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
javascript实现表单验证
2016/01/29 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
Vue组件选项props实例详解
2017/08/18 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
vue+iview+less 实现换肤功能
2018/08/17 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
python避免死锁方法实例分析
2015/06/04 Python
Python实现线程池代码分享
2015/06/21 Python
浅析python协程相关概念
2018/01/20 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
Python求解正态分布置信区间教程
2019/11/20 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
selenium判断元素是否存在的两种方法小结
2020/12/07 Python
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书