当图片获得焦点时，如果改变该图片的大小

下面代码中，我想打开该网页，第一个图片获得焦点，图片变大，但是没效果，是什么原因啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0;" /><style type="text/css">
img:focus{
    height:200px;
    width:200px;
}
img{
    height:100px;
    width:100px
}</style></head>
<body onload="setInitFoucs()">
       <img  id="imgid1" src="D:\photo\IMG_0006.jpg" />
       <img  id="imgid2" src="D:\photo\IMG_0006.jpg" />
       <img  id="imgid3" src="D:\photo\IMG_0006.jpg" />
  <script language="javascript">
    function setInitFoucs()
    {
    
        document.getElementById("imgid1").focus();
    }
    </script>
</body>
</html>

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>test</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0;" /><style type="text/css">
    .focus{
      height:200px;
      width:200px;
    }
    img{
      height:100px;
      width:100px
    }</style></head>
    <body onload="setInitFoucs()">
      <img id="imgid1" src="D:\a.jpg" />
      <img id="imgid2" src="D:\b.jpg" />
      <img id="imgid3" src="D:\gsjm.jpg" />
      <script language="javascript">//下面代码中，我想打开该网页，第一个图片获得焦点，图片变大，但是没效果，是什么原因啊 
      function setInitFoucs()
      {
     
      document.getElementById("imgid1").className = "focus";
      }
      </script>
    </body>
    </html>
      

  2.   

    .focus{
      height:200px;
      width:200px;
    }document.getElementById("imgid1").className = "focus";
      

  3.   

    楼主试试这个：
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>test</title>
    <style type="text/css">
    .focus{
      height:200px;
      width:200px;
    }
    img{
      height:100px;
      width:100px
    }</style></head>
    <body onload="setInitFoucs()">
      <img id="imgid1" src="D:\a.jpg" />
      <img id="imgid2" src="D:\b.jpg" />
      <img id="imgid3" src="D:\gsjm.jpg" />
      <script language="javascript">
      function setInitFoucs()
      {
    var imgs = document.getElementsByTagName("img");
    for(var i=0;i<imgs.length;i++)
    {
    imgs[i].onmouseover = function(){this.className = 'focus';};
    imgs[i].onmouseout = function(){this.className = 'img';};
    }
      }
      </script>
    </body>
    </html>
    onfocus对img行不通，可能对input(type=text之类的)还行得通
      

  4.   

    :focus 该伪类选择器的 兼容性不太好，不是任何元素都可以用的