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玩一玩WSH吧
Feb 23 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
Jul 23 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
Sep 19 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
JS 实现分页打印功能
May 16 Javascript
vue项目打包部署到服务器的方法示例
Aug 27 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 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
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
老生常谈PHP面向对象之命令模式(必看篇)
2017/05/24 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
PHP调用微博接口实现微博登录的方法示例
2018/09/22 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
2013/12/08 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
vue-router传递参数的几种方式实例详解
2018/11/13 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
中专生学习生活的自我评价分享
2013/10/27 职场文书
初三新学期计划书
2014/05/03 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
群众路线教育实践活动实施方案
2014/10/31 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
2015年新学期寄语
2015/02/26 职场文书