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 相关文章推荐
收藏一些不常用,但是有用的代码
Mar 12 Javascript
学习ExtJS accordion布局
Oct 08 Javascript
基于jQuery的公告无限循环滚动实现代码
May 11 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
JavaScript通过join函数连接数组里所有元素的方法
Mar 20 Javascript
Bootstrap每天必学之js插件
Nov 30 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
JavaScript导航脚本判断当前导航
Jul 12 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
JavaScript JSON使用原理及注意事项
Jul 30 Javascript
JS轮播图的实现方法
Aug 24 Javascript
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
PHP中include()与require()的区别说明
2010/03/10 PHP
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
30个php操作redis常用方法代码例子
2014/07/05 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
laravel框架使用阿里云短信发送消息操作示例
2020/02/15 PHP
图片动画横条广告带上下滚动可自定义图片、链接等等
2013/10/20 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
jstree的简单实例
2016/12/01 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
python生成随机mac地址的方法
2015/03/16 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
如何在Django中设置定时任务的方法示例
2019/01/18 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
Python是如何进行类型转换的
2013/06/09 面试题
幼儿园大班开学教师寄语
2014/04/03 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书
十八大观后感
2015/06/12 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android