`

Javascript兼容性之——getAttribute(),setAttribute()(获取设置属性)

阅读更多

做前端的,总是要跟兼容性打交道,CSS兼容性,JS兼容性,这里我总结了一些getAttribute(),setAttribute()在不同浏览器下兼容性以及如何解决这些问题:

 

<!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>

</body>
</html>
 

 

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 

 

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

 

这里是分析的是getAttribute(),setAttribute()同理。

 

如果觉得有用的话就顶一下  ^_^  ....

2
3
分享到:
评论
2 楼 陈小妞 2014-10-13  
alert(el.getAttribute("className")); 
IE8(含)以上IE,firefox,chrome弹出的是null
感谢总结……很好!
1 楼 joyven 2014-05-03  

相关推荐

    getAttribute和getParameter区别.

    1.getAttribute是取得jsp中 用setAttribute設定的attribute 2.parameter得到的是string;attribute得到的是object ...getAttribute返回的是Objiect,需进行转换,可是setAttribute设置成任意对象,使用很灵活,可随时用;

    对比Python中__getattr__和 __getattribute__获取属性的用法

    主要介绍了对比Python中__getattr__和 __getattribute__获取属性的用法,注意二者间的区别,__getattr__只作用于不存在的属性,需要的朋友可以参考下

    JS getAttribute和setAttribute(取得和设置属性)的使用介绍

    setAttribute:设置属性; 代码如下:&lt;!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”&gt;&lt;html&gt; &lt;head&gt; &lt;meta http-equiv=”Content-Type” ...

    javascript中setAttribute兼容性用法分析

    本文实例分析了javascript中setAttribute兼容性用法。分享给大家供大家参考,具体如下: 1:常规属性建议使用 node.XXXX。 2:自定义属性建议使用node.getAttribute(“XXXX”)。 3:当获取的目标是JS里的关键字时建议...

    JavaScript设置获取和设置属性的方法

    主要介绍了JavaScript设置获取和设置属性的方法,学会使用getAttribute、setAttribute的用法,需要的朋友可以参考下

    JS实现获取自定义属性data值的方法示例

    本文实例讲述了JS实现获取自定义属性data值的方法。分享给大家供大家参考,具体如下: HTML部分: &lt;div id=tree data-leaves=47 data-plant-height=2.4m&gt;&lt;/div&gt; js部分: var tree = document.getElementById...

    js中的getAttribute方法使用示例

    它只有一个参数——你打算查询的属性的名字: object.getAttribute(attribute) 不过,getAttribute()方法不能通过document对象调用,这与我们此前介绍过的其他方法不同。我们只能通过一个元素节点对象调用它。 例如...

    javascript setAttribute, getAttribute 在不同浏览器上的不同表现

    测试环境(客户端浏览器 ) IE6,IE7, IE8兼容模式, IE8 Firefox 3.6.8, google chrome 5.0.375.125 先来说明两个函数的标准定义。 elementNode.setAttribute(name,value) name 必需。规定要设置的属性名。 value ...

    php PDO属性设置与操作方法分析

    PDO::getAttribute:获取属性 语法: bool PDO::setAttribute ( int $attribute , mixed $value ) 设置数据库句柄属性。下面列出了一些可用的通用属性;有些驱动可能使用另外的特定属性。 参数 $attribute PDO::...

    ie火狐不兼容的sprint

    说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性. 解决方法:统一通过getAttribute()获取自定义属性. ...........

    javascript firefox兼容ie的dom方法脚本

     3.IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性. 解决方法:统一通过getAttribute()获取自定义属性. 4.IE下,HTML...

    IE6/7中getAttribute获取href/src 属性(相对路径0值与其它浏览器不同

    IE6/7中getAttribute获取href/src 属性(相对路径0值与其它浏览器不同的解决方法

    JavaScript:DOM编程艺术(第2版)

    《javascript dom编程艺术:第2版》讲述了javascript、dom 和html5 的基础知识,着重介绍...3.5 获取和设置属性 43 3.5.1 getattribute 43 3.5.2 setattribute 44 3.6 小结 45 第4章案例研究:javascript图片库 46

    getAttribute和getParameter区别

    getAttribute和getParameter区别 getAttribute和getParameter区别

    attrs:JavaScript 1.6+库,用于设置DOM元素属性

    @trs是一个JavaScript 1.6+库,用于设置供服务器端JavaScript使用的DOM元素属性。 要求 @trs需要支持,即XML的ECMAScript(E4X)。 支持的ECMAScript引擎:SpiderMonkey,TraceMonkey,ActionMonkey和Rhino。 用法 ...

    js设置和获取自定义属性的方法

    Js操作自定义属性的方法: var testEle = document.getElementByIdx_x("test") testEle.setAttribute("test","aaa"); // 设置 testEle.getAttribute("test"); //获取 testEle.attributes["test"].nodeValue; // ...

Global site tag (gtag.js) - Google Analytics