为什么我的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>
<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>
解决方案 »
- 请教个js正则问题 去html内容中的空格
- 这个return 语句是什么意思?
- 为什么我按下“业务部门”复选框时,系统报错了,说不支持此方法或属性?。我又该如何控制disabled?
- 如何使一段iframe的代码用js输出到html页面的头部,原html能自动下沉
- js中如果复选框只有一个选项,怎么让其默认不被选择?
- 数据库批量插入问题?
- Javascript难题:一个页面中有很多很多个Input,ID不同,名字可能相同,如何限定某些输入框只能输入数字
- 通过一个层的滚动条来控制另一个层的位置, 很难
- 如何用javascript算出农历春节的阳历日期?
- 能否用JS把YEAH.NET二级域名的弹出窗口给干失效了,哪位大侠研究过这个东西怎么弄?
- 求助: javascript事件问题
- 客户端解析服务端返回的HTML
<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>
<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后就指向当前对象。
<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>现在全起作用了
在运行的时候,a早已运行到最后一个,也就是div2。所以无论触发哪个对象的事件。a永远代表div2解决这个问题。只有使用闭包来解决。先传进function,然后通过target,把对象的值保存起来
两个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>