IE浏览器对Attribute的解析
昨天遇到的一个bug，开发将一个自定义属性中的一个字母写成了大写，结果造成ie浏览器下的判断失效，这里记录一下，并在其它浏览器下作了测试。
Test Code:
<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浏览器下，显得非常的复杂。
在使用getAttribute读值的时候，ie会把里边的值忽略大小写，而去匹配html里的属性值，然后返回，使用setAttribute去设置的时候，ie同样会忽略大小写而去正确的设置html里的属性值，但是这个值你读不到，当你再去使用getAttribute去获取的时候，读到的依然是最初默认的值。只有你正确的书写attribute的值，并设置的时候才能正确的读取。也就是说，当你使用setAttribute去设置的时候一定要和源码里的大小写保持一致，而当你在使用getAttribute去读取的时候可以忽略其大小写。
总结：为了避免不必要的问题发生，在设置自定义属性的时候不要有大小写之分。对于html节点本身有的attribute，则应该依照ie的解析去书写，比如colSpan、rowSpan、frameBorder等等。
Demo测试地址：http://www.12sui.cn/test/attribute-ie.html
测试浏览器：IE6、IE7、IE8、Opera 10.10(Build 1893)、Firefox 3.5.6、Chrome 3.0.195.38、Safari 4.0.3(531.9.1)。
这篇文章发布于 2009年12月25日，星期五，08:17，归类于 HTML, JavaScript。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。
