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 相关文章推荐
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
让alert不出现弹窗的两种方法
May 18 Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
js改变embed标签src值的方法
Apr 10 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
Nov 18 Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
图文讲解vue的v-if使用方法
Feb 11 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 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计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
zend framework配置操作数据库实例分析
2012/12/06 PHP
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
python实现创建新列表和新字典,并使元素及键值对全部变成小写
2019/01/15 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
什么是.net
2015/08/03 面试题
护理毕业生自荐信范文
2013/12/22 职场文书
论文诚信承诺书
2014/05/23 职场文书
保护环境的标语
2014/06/09 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
纪录片信仰观后感
2015/06/08 职场文书
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS