<body>
  <ul>
        <li id="l1"></li>
        <li id="L1"></li><!--注意这里是大写-->
        <li id="l1"></li>
    </ul>
    <input type="text" name="l1" />
    <input type="text" name="l1" />
</body>

<script>
    /***********************
     * W3C规定一个文档中的id是唯一的,所有getElementByid的上下文必须是document;
     * 如果在页面中,id重复了,只会获取第一个;
     * 在ie6-7下,id是不区分大小写的;
     * 在ie6-7下,表单元素的name属性会被当做id使用
     * 项目规范:
     *      给元素命名id的时候,不能给用大小写来区别一个id值;
     *      表单元素的name值不要与id重名;
    * **********************/
    var oL1=document.getElementById('l1');
    var oL2=document.getElementById('L1');
    oL1.style.background='#ec393c'; //ie7:input的name值会被取到
    oL2.style.backgroundColor='#666'; //ie7支持这行代码,ie8开始显示正常

    /*
     * 如果把<script>标签放在</body>结束标签后面,可以直接使用id;
     * 但在真实项目中,不能这样做,此处仅供了解.
    */
</script>

 

 posted on 2015-05-10 18:35  gupeng1988  阅读(242)  评论(0)    收藏  举报