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 相关文章推荐
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
jquery validate表单验证插件
Sep 06 Javascript
简单三步实现报表页面集成天气
Dec 15 Javascript
ES6深入理解之“let”能替代”var“吗?
Jun 28 Javascript
浅谈vue 单文件探索
Sep 05 Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 Javascript
Vue传参一箩筐(页面、组件)
Apr 04 Javascript
Vue自动构建发布脚本的方法示例
Jul 24 Javascript
vue - props 声明数组和对象操作
Jul 30 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
下载文件的点击数回填
2006/10/09 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
PHP类型约束用法示例
2016/09/28 PHP
JavaScript 序列化对象实现代码
2009/12/18 Javascript
Cookie 小记
2010/04/01 Javascript
js判断鼠标左、中、右键哪个被点击的方法
2015/01/27 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
django rest framework之请求与响应(详解)
2017/11/06 Python
利用Python如何将数据写到CSV文件中
2018/06/05 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
Django重设Admin密码过程解析
2020/02/10 Python
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
中国制造网:Made-in-China.com
2019/10/25 全球购物
应届生体育教师自荐信
2013/10/03 职场文书
优秀求职自荐信怎样写
2013/12/18 职场文书
结婚邀请函范文
2014/01/14 职场文书
公证书格式
2015/01/23 职场文书
男生贾里读书笔记
2015/06/30 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS
PYTHON 使用 Pandas 删除某列指定值所在的行
2022/04/28 Python
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android