谷歌浏览器获取样式失败。。。。。

来源:4-2 获取样式

慕先生8224389

2016-10-14 10:47

<!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=utf-8" />

<title>无标题文档</title>

<style>

#div1{

width:200px;

height:200px;

background:#F00; 

border:4px solid #000;

}

</style>

<script>

window.onload=function(){

startMove();

}

function startMove(){

setInterval(function(){

var oDiv=document.getElementById("div1");

//oDiv.style.width=oDiv.offsetWidth-1+'px';

oDiv.style.width=parseInt(getStyle(oDiv,'width'))-10+'px';

},30)

}

function getStyle(obj,attr){

if(obj.currentStyle){ 

return obj.currentStyle[attr];

}

else{

return obj.getComputedStyle(obj,false)[attr];

}

}

</script>

</head>


<body>

<div id="div1"></div>

</body>

</html>


写回答 关注

3回答

  • 黑色秋水
    2016-10-20 07:17:07
    已采纳

    getComputedStyle方法里已经有了对象参数而且此方法是定义在window下的而不是元素对象下,你前面又在元素对象下调用,所以报错;(前面"obj."去掉)

    慕先生822...

    非常感谢!

    2016-10-24 10:17:19

    共 1 条回复 >

  • 黑色秋水
    2016-10-24 10:38:01
    <!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=utf-8" />
    <title>无标题文档</title>
    <style>
    #div1{
    width:200px;
    height:200px;
    background:#F00;
    border:4px solid #000;
    }
    </style>
    <script>
    window.onload=function(){
    startMove();
    }
    function startMove(){
    setInterval(function(){
    var oDiv=document.getElementById("div1");
    //oDiv.style.width=oDiv.offsetWidth-1+'px';
    oDiv.style.width=parseInt(getStyle(oDiv,'width'))-10+'px';
    },30)
    }
    function getStyle(obj,attr){
    if(obj.currentStyle){
    return obj.currentStyle[attr];
    }
    else{
    return getComputedStyle(obj,false)[attr];//这个地方是直接调用前面不用obj.
    }
    }
    </script>
    </head>

    <body>
    <div id="div1"></div>
    </body>
    </html>


  • 慕先生8224389
    2016-10-14 10:58:46

    http://img.mukewang.com/580049c40001ade004580077.jpg

    浏览器报错

JS动画效果

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

113925 学习 · 1443 问题

查看课程

相似问题