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 相关文章推荐
JavaScript 学习笔记(十六) js事件
Feb 01 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
特殊日期提示功能的实现方法
Jun 16 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
功能强大的Bootstrap使用手册(一)
Aug 02 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
js常用正则表达式集锦
May 17 Javascript
vue-cli设置css不生效的解决方法
Feb 07 Javascript
详解webpack-dev-middleware 源码解读
Mar 23 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
星际原理概述
2020/03/04 星际争霸
PL-880隐藏功能
2021/03/01 无线电
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
Yii视图CGridView实现操作按钮定义地址示例
2016/07/14 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
2013/04/25 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
2016/03/06 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
Bootstrap Table使用整理(二)
2017/06/09 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
利用python画一颗心的方法示例
2017/01/31 Python
Python实现字符串格式化的方法小结
2017/02/20 Python
Python+OpenCV人脸检测原理及示例详解
2020/10/19 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
用Python写一个自动木马程序
2019/09/17 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
python实现简单井字棋小游戏
2020/03/05 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
python之pygame模块实现飞机大战完整代码
2020/11/29 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
公司前台接待岗位职责
2013/12/03 职场文书
三八活动策划方案
2014/08/17 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
2015年后勤工作总结范文
2015/04/08 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书