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 相关文章推荐
js实现ASP分页函数 HTML分页函数
Sep 22 Javascript
淘宝搜索框效果实现分析
Mar 05 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
jquery实现数字输入框
Feb 22 Javascript
vue.js组件之间传递数据的方法
Jul 10 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
VSCode配置react开发环境的步骤
Dec 27 Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
Apr 02 Javascript
javascript实现贪吃蛇小游戏
Jul 28 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读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
JS控制表格隔行变色
2006/06/26 Javascript
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
浅谈document.write()输出样式
2015/05/07 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
javascript回到顶部特效
2016/07/30 Javascript
easyui-datagrid特殊字符不能显示的处理方法
2017/04/12 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
微信小程序后台解密用户数据实例详解
2017/06/28 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
2017/09/13 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
用python写测试数据文件过程解析
2019/09/25 Python
python打开使用的方法
2019/09/30 Python
基于Python实现拆分和合并GIF动态图
2019/10/22 Python
Python:slice与indices的用法
2019/11/25 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
用HTML5中的Canvas结合公式绘制粒子运动的教程
2015/05/08 HTML / CSS
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
什么是测试驱动开发(TDD)
2012/02/15 面试题
信息与计算科学专业推荐信
2014/02/23 职场文书
安全承诺书
2015/01/19 职场文书
画展邀请函
2015/01/31 职场文书
个人工作表现自我评价
2015/03/06 职场文书
2019年励志签名:致拼搏路上的自己
2019/10/11 职场文书
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android
vue css 相对路径导入问题级踩坑记录
2022/06/05 Vue.js
教你nginx跳转配置的四种方式
2022/07/07 Servers