为了账号安全,请及时绑定邮箱和手机立即绑定

我按照老师的思路写的,内容也没区别,但是在最后obj.style.left的时候一直报错显示obj.style未定义是为什么,我代码在下面,就大神解惑

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">



*{padding:0;margin:0;}

ul,li{

list-style:none;

}

ul li{

width:200px;

height: 100px;

background: yellow;

margin-bottom:20px;

}

</style>

<script>

window.onload=function(){



var oLi=document.getElementsByTagName('li');

for(var i=0,l=oLi.length;i<l;i++){

this.onmouseover=function(){

move(this,400);

}

this.onmouseout=function(){

move(this,200);

}

}}

var timer=null;

function move(obj,iTarget){

clearInterval(timer);


timer=setInterval(function(){

var speed=(iTarget-obj.offsetWidth)/2>0?Math.ceil(speed):Math.floor(speed);

if(obj.offsetWidth==iTarget){

clearInterval(timer);

}else{

obj.style.width=obj.offsetWidth+speed+'px';//这里的obj.style一直显示未定义

}

},50);

}

</script>

</head>

<body>

<ul>

<li></li>

<li></li>

<li></li>

</ul>

</body>

</html>


正在回答

3 回答

参照你的代码看看,也许对你有帮助


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">



*{padding:0;margin:0;}

ul,li{

list-style:none;

}

ul li{

width:200px;

height: 100px;

background: yellow;

margin-bottom:20px;

}

</style>

<script>

window.onload=function(){
var oLi=document.getElementsByTagName('li');

for(var i=0;i<oLi.length;i++){

oLi[i].onmouseover=function(){/*有改动*/

move(this,400);

}

oLi[i].onmouseout=function(){{/*有改动*/

move(this,200);

}

}}

var timer=null;

function move(obj,iTarget){

clearInterval(timer);


timer=setInterval(function(){
    var speed=(iTarget-obj.offsetWidth)/8;{<!--有改动,原来的那样写运算次序有问题-->

var speed=speed>0?Math.ceil(speed):Math.floor(speed);

if(obj.offsetWidth==iTarget){

clearInterval(timer);

}else{

obj.style.width=obj.offsetWidth+speed+'px';//这里的obj没问题

}

},50);

}

</script>

</head>

<body>

<ul>

<li></li>

<li></li>

<li></li>

</ul>

</body>

</html>

0 回复 有任何疑惑可以回复我~
#1

qq_苏慕遮_24019744 提问者

非常感谢!
2016-10-09 回复 有任何疑惑可以回复我~

<!DOCTYPE HTML>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            *{

                margin: 0px;

                padding: 0px;

            }

            ul,li{

                list-style: none;

            }

            ul li{

                width: 200px;

                height: 100px;

                background:yellow;

                margin-bottom:20px;

            }

        </style>

        <script type="text/javascript">

            window.onload = function(){

                var aLi = document.getElementsByTagName('li');

                for(var i = 0. i < aLi.length; i++){

                    aLi[i].onmouseover = function(){

                        startMove(this, 400);

                    }

                    aLi[i].onmouseout = function(){

                        startMove(this, 200);

                    }

                }

            }

            var timer = null;

            function startMove(obj, Target){

                clearInterval(timer);

                timer = setInterval(function(){

                    var speed = (Target - obj.offsetWidth)/8;

                    speed = (speed > 0) ? Math.ceil(speed): Math.floor(speed);

                    if(obj.offsetWidth == Target){

                        clearInterval(timer);

                    }

                    else{

                        obj.style.width = obj.offsetWidth + speed + 'px';

                    }

                }, 30)

            }

    </script>

    </head>

    <body>

        <ul>

            <li></li>

            <li></li>

            <li></li>

        </ul>

    </body>

</html>


0 回复 有任何疑惑可以回复我~

首先。

for(var i=0,l=oLi.length;i<l;i++){

this.onmouseover=function(){


这里就不该直接用this,而应该使用

oLi[i].onmouseover=function(){}

因为你遍历循环的时候没指名是哪个object在里面,所以this是属于window object。而不是具体的某个html元素。




2 回复 有任何疑惑可以回复我~
#1

衣染

还有疑惑的话欢迎追问~互相学习。
2016-10-09 回复 有任何疑惑可以回复我~
#2

刘颜 回复 衣染

如果 <script> 标签有 "type" 属性, 其值应为 "text/javascript" 或者 "application/javascript". 另外脚本必须可解析(语法上正确)。 希望可以帮忙解答一下,谢谢
2016-10-31 回复 有任何疑惑可以回复我~
#3

刘颜 回复 衣染

我的代码贴在下面回复
2016-10-31 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

我按照老师的思路写的,内容也没区别,但是在最后obj.style.left的时候一直报错显示obj.style未定义是为什么,我代码在下面,就大神解惑

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信