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 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
JavaScript学习笔记之数组去重
Mar 23 Javascript
Boostrap入门准备之border box
May 09 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
vue.js,ajax渲染页面的实例
Feb 11 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
Angular2实现的秒表及改良版示例
May 10 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 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邮件发送,php发送邮件的类
2011/03/24 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
一段批量给页面上的控件赋值js
2010/06/19 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
使用js画图之饼图
2015/01/12 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
javascript产生随机数方法汇总
2016/01/25 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
jQuery实现获取多选框的值示例
2020/02/07 jQuery
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
Python中的Classes和Metaclasses详解
2015/04/02 Python
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
python占位符输入方式实例
2019/05/27 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
Python3列表List入门知识附实例
2020/02/09 Python
jupyter notebook 多行输出实例
2020/04/09 Python
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
幼儿园运动会口号
2014/06/07 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
作文评语集锦
2014/12/25 职场文书
七年级数学教学反思
2016/02/17 职场文书
python基于opencv批量生成验证码的示例
2021/04/28 Python
Python基础之函数嵌套知识总结
2021/05/23 Python
浅析Python中的随机采样和概率分布
2021/12/06 Python
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL