javascript中setAttribute兼容性用法分析


Posted in Javascript onDecember 12, 2016

本文实例分析了javascript中setAttribute兼容性用法。分享给大家供大家参考,具体如下:

1:常规属性建议使用 node.XXXX。
2:自定义属性建议使用node.getAttribute("XXXX")。
3:当获取的目标是JS里的关键字时建议使用node.getAttribute("XXX"),如label中的for。
4:当获取的目标是保留字,如:class,请使用className代替。

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!"); }

示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>kingwell</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
<div id="idHeader" class="class-header" title="kingwell" status="1"></div>
<label id="forUserName" for="userName" title="kingwell" status="1"></label>
<script type="text/javascript">
var el = document.getElementById("idHeader");
alert(el.getAttribute("id"));
alert(el.id);
// IE Firfox->idHeader
alert(el.getAttribute("class"));
//IE6,IE7 -> null IE8,IE9,Firefox ->class-header
alert(el.class);
//IE6,IE7,IE8->报错 IE9,Firefox->undefined
alert(el.getAttribute("className"));
//IE6,IE7->class-header ; IE8,IE9,Firefox -> undefined
alert(el.className);
//All -> class-header
var elfor = document.getElementById("forUserName");
alert(elfor.getAttribute("for"));
//IE6,IE7->undefined IE8,9,Firefox->forUseName
alert(elfor.for )
//IE6,IE7报错,其它为undefined
alert(elfor.title)
//全部输出kingwell
alert(elfor.status);
//IE6-8 -> 1 IE9,Firefox->undefined
alert(elfor.getAttribute("status"))
//全部输出 1
</script>
</body>
</html>

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
jquery插件hiAlert实现网页对话框美化
May 03 Javascript
JS动态日期时间的获取方法
Sep 28 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 Javascript
微信小程序 POST请求的实例详解
Sep 29 Javascript
Vue异步加载about组件
Oct 31 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 Javascript
详解vue中使用微信jssdk
Apr 19 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 Javascript
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
jQuery焦点图左右转换效果
Dec 12 #Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 #Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 #Javascript
多种方式实现js图片预览
Dec 12 #Javascript
JavaScript实现多栏目切换效果
Dec 12 #Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 #Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 #Javascript
You might like
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
javascript 自定义事件初探
2009/08/21 Javascript
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
nodejs命令行参数处理模块commander使用实例
2014/09/17 NodeJs
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
TF-IDF算法解析与Python实现方法详解
2017/11/16 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
django有哪些好处和优点
2020/09/01 Python
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
儿科护士自我鉴定
2013/10/14 职场文书
《台湾的蝴蝶谷》教学反思
2014/02/20 职场文书
见习报告的格式
2014/10/31 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
监考失职检讨书
2015/01/26 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL
关于mysql中string和number的转换问题
2022/06/14 MySQL