getStyle(obj,attr)
為啥我的動(dòng)畫不出來
<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>
2017-02-18
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</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>
以上，你的錯(cuò)誤好多啊，自己對(duì)比吧
2020-03-23
odiv.style.width=parseInt(getStyle(odiv,width))-1+'px';你的width沒有加引號(hào)
2017-02-18
window.onload=function(){
?? ? var odiv=document.getElementById("div1");
?? ? alert(odiv.stye.width);-----style
?? ? odiv.onmouseover=function(){
?? ??? ? startMove();