课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

getStyle(obj,attr)

来源：4-2 获取样式

qq_MissingYou_0

2017-02-18 10:23

为啥我的动画不出来

<style>
*{
    margin:0;
    padding:0;
    
    }
  div{
      width:200px;
      height:200px;
      background:red;
      border:4px solid black;
      }
</style>
<script>
 window.onload=function(){
     var odiv=document.getElementById("div1");
     alert(odiv.stye.width);
     odiv.onmouseover=function(){
         startMove();
         }
    }
    
     var timer=null;
     function startMove(){
         clearInterval(timer);
        var odiv=document.getElementById("div1");
         timer=setInterval(function(){
             if(odiv.offsetWidth==0){
              clearInterval(timer);
             }else{
                // odiv.style.width=odiv.offsetWidth-9+'px';
                odiv.style.width=parseInt(getStyle(odiv,width))-1+'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回答

  • 尹为者
    2017-02-18 12:41:46
    已采纳

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    </head>

    <body>
    <style>
    *{
        margin:0;
        padding:0;
        
        }
      div{
          width:200px;
          height:200px;
          background:red;
          border:4px solid black;
          }
    </style>
    <script>
     window.onload=function(){
         var odiv=document.getElementById("div1");
         odiv.onmouseover=function(){
             startMove();
             }
        }
        
         var timer=null;
         function startMove(){
             clearInterval(timer);
            var odiv=document.getElementById("div1");
             timer=setInterval(function(){
                 if(odiv.offsetWidth==0){
                  clearInterval(timer);
                 }else{
                    // odiv.style.width=odiv.offsetWidth-9+'px';
                    odiv.style.width=parseInt(getStyle(odiv,"width"))-1+'px';
                     }
                 },30)}
        function getStyle(obj,attr){
             if(obj.currentStyle){
                 return obj.currentStyle[attr];
                 }else{
                 return getComputedStyle(obj,false)[attr];
                     }
            }
    </script>
    </head>

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

    以上，你的错误好多啊，自己对比吧

    5 0

    尹为者 回复qq_Mis...

    width加引号，第二个return不需要前置obj

    2017-02-20 08:51:55

    共 5 条回复 >

  • 慕无忌4172087
    2020-03-23 12:20:30

    odiv.style.width=parseInt(getStyle(odiv,width))-1+'px';你的width没有加引号


    0 0
  • 尹为者
    2017-02-18 11:54:44

    window.onload=function(){
         var odiv=document.getElementById("div1");
         alert(odiv.stye.width);-----style
         odiv.onmouseover=function(){
             startMove();

    1 0

    qq_Mis...

    能弹窗 但是窗口里面没得数值 是空白的 动画也没有

    2017-02-18 14:49:42

    共 1 条回复 >

JS动画效果

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

113925 学习 · 1443 问题

查看课程

相似问题

var icur=parseFloat(getStyle(obj,attr))*100;

回答 1

Math.round(parseFloat(getStyle(obj,attr))*100))

回答 2

var icur=Math.round(parseFloat(getStyle(obj,attr)*100));

回答 3

为什么加了getStyle(obj, attr)没有解决问题

回答 1

getComputedStyle(obj,false)[attr];

回答 3

打开慕课网App查看更多内容