在做DHTML的前端开发过程中，经常需要动态的添加、移除或者获取元素的Attribute。也就是说经常会用到setAttribute、removeAttribute和getAttribute。同时与getAttribute(attri)配对来得到相应的自定义attribute的值。昨天遇到的一个IE bug，开发将一个自定义属性中的一个字母写成了大写，结果造成IE浏览器下的判断失效。今天要讨论的是开发中遇到的几处IE浏览器与Firefox对Attribute操作的差异。这里记录一下，并在其它浏览器下作了测试，希望大家在IE浏览器下处理Attribute元素的时候要小心。
属性名大小写
在Firefox中，属性没有小写的概念，就算属性名全用大写，Firefox也会解析成小写，用Firebug看就能看到。所以下面的代码在Firefox与IE浏览器中运行结果会不一样。
<div altStr=”sss”></div>
<script type=”text/javascript”>
var div = document.getElementsByTagName(”div”)[0];
div.removeAttribute(”altstr”);
alert(div.getAttribute(”altstr”));//IE中返回sss,FF中返回null
</script>
不过在IE中，removeAttribute有第二个参数，设置为true表示不忽略大小写，为false时忽略大小写，默认值是true；Firefox中因为解析时就不存在大写属性了，所以就没有第二个参数。也就是说IE中removeAttribute(”test”,false)等同于Firefox中的removeAttribute(”test”)，IE中removeAttribute(”test”,true)在Firefox中无法实现。
Button的value属性
假设有下面一个button，怎么可以得到button的value属性？
<button value=”a”>b</button>
其实上，在IE下，无论是btn.getAttribute(”value”)、btn.value、btn.innerHTML还是btn.innerText都得”b”，但是在Firefox下，btn.getAttribute(”value”)、btn.value得到的都是”a”，btn.innerHTML得到的是”b”。也就是说我们如果要在button上加自定义属性，不要用”value”做属性名，否则在IE下没办法取到值。
getAttribute返回值类型不同
看一下下面的代码，你认为IE与Firefox分别会返回什么？
<button onclick=”alert(0)”>b</button>
<script type=”text/javascript”>
var btn = document.getElementsByTagName(”button”)[0];
alert(btn.getAttribute(”onclick”));
</script>
IE下，getAttribute(”onclick”)返回的是一个function，直接可以调用，Firefox下则返回一个string，直接调用会出错。
测试的代码:
<div id=”test” data-Maxvalue=”1″ style=”width:300px; height:200px; border:2px solid green; margin:50px auto; padding:20px”>
此div设置自定义属性data-Maxvalue值为1.
</div>
<script type=”text/javascript”>
var el = document.getElementById(’test’);
alert(el.getAttribute(’data-maxvalue’));
el.setAttribute(’data-maxvalue’,’2′);
alert(el.getAttribute(’data-maxvalue’));
alert(el.getAttribute(’data-Maxvalue’));
el.setAttribute(’data-maxValue’,’2′);
alert(el.getAttribute(’data-maxValue’));
el.setAttribute(’data-Maxvalue’,’2′);
alert(el.getAttribute(’data-maxValue’));
</script>
如果设置一个自定义属性data-Maxvalue，那么除ie外的所有浏览器都会忽略大小写而统一解析为data-maxvalue，可以用各自的developer tool查看下，而且在读取的时候也会忽略大小写，都不会造成读值、设值的问题，但是在ie浏览器下，显得非常的复杂。