星期三, 九月 06, 2006

锚标记测试

今天在用锚标记时,有个小小的发现,下面这个就是写的一个测试页面,在IE和FIREFOX中,html的ID标记都可以当做锚来直接使用,但在IE中如果锚标记的名称和某些html的ID标记重复时,使用 document.getElementById()方法时就有可能产生问题,把下面的代码保存成html文件执行就可以看出问题了。
 
点击这里查看效果
 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>锚标记测试</title>
<script language="JavaScript" type="text/JavaScript">
function chStyle(eid)
{
    for(i=0; i<20; i++)
    {
        if(i==eid)
        {
            document.getElementById (eid).style.color='red';
        }
        else
        {
            document.getElementById(i).style.color='#000000';
        }
    }
}
</script>
</head>

<body>
<script>

    document.write("<table width='300' border='0' cellpadding='3' cellspacing='1' bgcolor='grey' >");

    document.write("<tr>");
    for(i=0; i<20; i++)
    {   
        if(i%5==0&&i!=0) document.write("</tr><tr>");
        document.write("<td ><a href='#"+i+"' onclick ='return chStyle("+i+")'>第"+i+"行</a></td>");

    }
    document.write("</tr>");
    document.write("</table><br>");


    document.write("<table width='300' border='0' cellpadding='3' cellspacing='1' bgcolor='grey' >" );
    for(i=0; i<20; i++)
    {   
        document.write("<tr align='center'>");
       
        document.write("<td><a name='"+i+"'>左"+i+"行</a></td><td id='"+i+"'>右"+i+"行</td>");
       
        document.write ("</tr>");
    }
    document.write("</table>");
</script>
</body>
</html>



--
by 无际海

小蚂蚁也有理想--IT蚂蚁工作室
www.ItMaYi.com
www.ItMaYi.cn

没有评论: