为什么我的JS对DIV2不起效果？

为什么我的JS对DIV2不起效果？如何对DIV1与DIV2同时起效果！
<div id="div1">
AAAAAAAAAAAAAAAAAAAAA<br>
BBBBBBBBBBBBBBBBBBBBB<br>
AAAAAAAAAAAAAAAAAAAAA<br>
AAAAAAAAAAAAAAAAAAAAA<br>
BBBBBBBBBBBBBBBBBBBBB<br>
AAAAAAAAAAAAAAAAAAAAA<br>
AAAAAAAAAAAAAAAAAAAAA<br>
BBBBBBBBBBBBBBBBBBBBB<br>
AAAAAAAAAAAAAAAAAAAAA<br>
AAAAAAAAAAAAAAAAAAAAA<br>
BBBBBBBBBBBBBBBBBBBBB<br>
AAAAAAAAAAAAAAAAAAAAA<br>
AAAAAAAAAAAAAAAAAAAAA<br>
BBBBBBBBBBBBBBBBBBBBB<br>
AAAAAAAAAAAAAAAAAAAAA<br>
AAAAAAAAAAAAAAAAAAAAA<br>
BBBBBBBBBBBBBBBBBBBBB<br>
AAAAAAAAAAAAAAAAAAAAA<br>
</div>
<div id="div2">
AAAAAAAAAAAAAAAAAAAAA<br>
BBBBBBBBBBBBBBBBBBBBB<br>
AAAAAAAAAAAAAAAAAAAAA<br>
AAAAAAAAAAAAAAAAAAAAA<br>
BBBBBBBBBBBBBBBBBBBBB<br>
AAAAAAAAAAAAAAAAAAAAA<br>
AAAAAAAAAAAAAAAAAAAAA<br>
BBBBBBBBBBBBBBBBBBBBB<br>
AAAAAAAAAAAAAAAAAAAAA<br>
AAAAAAAAAAAAAAAAAAAAA<br>
BBBBBBBBBBBBBBBBBBBBB<br>
AAAAAAAAAAAAAAAAAAAAA<br>
AAAAAAAAAAAAAAAAAAAAA<br>
BBBBBBBBBBBBBBBBBBBBB<br>
AAAAAAAAAAAAAAAAAAAAA<br>
AAAAAAAAAAAAAAAAAAAAA<br>
BBBBBBBBBBBBBBBBBBBBB<br>
AAAAAAAAAAAAAAAAAAAAA<br>
</div>
<script type="text/javascript">
for(i=1;i<=2;i++){
var a=document.getElementById("div"+i);
a.style.overflow="hidden";
if(parseInt(a.offsetHeight)>=100)
  {
  a.style.height="100px"; 
  a.onmouseover=function(){
  a.style.overflow="auto";
  }
  a.onmouseout=function(){
  a.style.overflow="hidden";
  }
  }
    }
</script>

解决方案 »

  1.   


    <div id="div1">
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    </div>
    <div id="div2">
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    </div>
    <script type="text/javascript">
    window.onload=function(){
    for(i=1;i<=2;i++){
    var a=document.getElementById("div"+i);
    a.style.overflow="hidden";
    if(parseInt(a.offsetHeight)>=100)
    {
      a.style.height="100px";  
      a.onmouseover=(function(obj){
        return function(){obj.style.overflow="auto";}
      })(a);
      a.onmouseout=(function(obj){
        return function(){obj.style.overflow="hidden";}
      })(a);
    }
    }
    }
    </script>
      

  2.   

    乍看是没什么问题的，运行的话只有div2响应了onmouseover和onmouseout事件。<html>
    <script type="text/javascript"></script>
    <body>
    <div id="div1" style="background-color:#FF6600">
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    </div>
    <div id="div2" style="margin-top:50px;background-color:#A9F5A9">
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    </div>
    <script type="text/javascript">
    for(i=1;i<=2;i++){
    var a=document.getElementById("div"+i);
    if(parseInt(document.getElementById("div"+i).offsetHeight)>=100)
      {
      a.style.height="100px";  
      a.onmouseover=function(){
      this.style.overflow="auto";//a改成了this
      }
      a.onmouseout=function(){
      this.style.overflow="hidden";//同上
      }
      }
      }
    </script>
    </body>
    </html>按照原来的代码，当鼠标在div1上的时候，要执行函数onmouseover，但是a.style.overflow="auto";中的a到底指向了什么？a其实是指的div2。该成this后就指向当前对象。
      

  3.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-31j">
    <title>Insert title here</title>
    <script type="text/javascript">
    </script>
    </head>
    <body>
    <div id="div1">AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    </div>
    <div id="div2">AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    </div>
    <script type="text/javascript"> for (var i = 1; i <= 2; i++){
    var a = document.getElementById("div" + i);
    a.style.overflow = "hidden";
    if (parseInt(a.offsetHeight) >= 100) {
       a.style.height = "100px";
       a.onmouseover = function(target) {
          return function() {
          target.style.overflow = "auto";
             };
       }(a);
       a.onmouseout = function(target) {
          return function() {
          target.style.overflow = "hidden";
             };
      
       }(a);
       }
       }
    </script>
    </body>
    </html>现在全起作用了
      

  4.   

    原理就在于，js是运行时绑定对象。
    在运行的时候，a早已运行到最后一个，也就是div2。所以无论触发哪个对象的事件。a永远代表div2解决这个问题。只有使用闭包来解决。先传进function，然后通过target，把对象的值保存起来
      

  5.   

    另外，循环变量i前面也没有加var，这样会直接导致i变成了全局变量。
      

  6.   

    不是对DIV2没起效果,是对DIV1没起效果.
    两个DIV的innerHTML都一样,你能分出来哪个是哪个??
    HTML和JS都改了下,更直观了:
    <div id="div1">
    11111111111111111111111111<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    </div>
    <hr>
    <div id="div2">
    22222222222222222222222<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    BBBBBBBBBBBBBBBBBBBBB<br>
    AAAAAAAAAAAAAAAAAAAAA<br>
    </div>
    <script type="text/javascript">
    for(i=1;i<=2;i++){
    var a=document.getElementById("div"+i);
    a.style.overflow="hidden";
    if(parseInt(a.offsetHeight)>=100)
     {
    a.style.height="100px";  
    a.onmouseover=function(){  event.srcElement.style.overflow="auto";  }
    a.onmouseout=function(){  event.srcElement.style.overflow="hidden";  }
    }
    }
    </script>