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浮点数运算出现Bug的方法
Mar 12 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
js获取iframe中的window对象的实现方法
May 20 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
基于JavaScript实现报警器提示音效果
Oct 27 Javascript
详解vue-cli中模拟数据的两种方法
Jul 03 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 Javascript
一秒学会微信小程序制作table表格
Feb 14 Javascript
Vue 之孙组件向爷组件通信的实现
Apr 23 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 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 替换模板变量实现步骤
2009/08/24 PHP
php将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
PHP中“=&gt;
2019/03/01 PHP
一些有关检查数据的JS代码
2006/09/07 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
JS 退出系统并跳转到登录界面的实现代码
2013/06/29 Javascript
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
nodejs基础知识
2017/02/03 NodeJs
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
今天,小程序正式支持 SVG
2019/04/20 Javascript
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
接口的多继承会带来哪些问题
2015/08/17 面试题
英语专业毕业个人求职自荐信
2013/09/21 职场文书
英语专业毕业生自我鉴定
2013/11/09 职场文书
20年同学聚会感言
2014/02/03 职场文书
大学开学计划书
2014/04/30 职场文书
小学科学教学计划
2015/01/21 职场文书
自荐信格式模板
2015/03/27 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
电影建党伟业观后感
2015/06/01 职场文书
html5调用摄像头截图功能
2022/01/18 Javascript