JavaScript DOM解决出现的elem.style.left为Nan的问题

最新推荐文章于 2024-05-06 21:51:47 发布

ShangzhiXu

最新推荐文章于 2024-05-06 21:51:47 发布

阅读量420

点赞数 1

分类专栏： js 笔记文章标签： js

本文链接：https://blog.csdn.net/LXpiggy/article/details/108658077

版权

笔记同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

JavaScript DOM解决出现的elem.style.left为Nan的问题

在使用DOM写动画的时候，使用代码

// An highlighted block
function moveElement()
{
    var m = document.getElementById("numb");
    var t = setTimeout("move()",10);
}
function move()
{
    var m = document.getElementById("numb");
    var xpos = parseInt(m.style.left);
    var ypos = parseInt(m.style.top);
    console.log ( parseInt(m.style.left) );
    if(xpos == 200 && ypos == 500)
    {
        return true;
    }
    if(xpos < 200){
        xpos++;
    }if(xpos > 200){
        
        xpos--;
    }
    if(ypos > 500){
       
        ypos--;
    }if(ypos < 500){
       
        ypos++;
    }
    m.style.left = xpos + "px";
    m.style.top = ypos + "px";
    var t = setTimeout("move()",10);
}

无法出现动画，其中使用consel.log(m.style.left)输出为nan
在添加改动后

function moveElement()
{
    var m = document.getElementById("numb");
   m.style.left = "10px";
   m.style.top = "20px";
   m.style.position = "absolute";
    /*for(i = 0;i < m.length;i++)
    {
        var cur_img = m[i];
        cur_img.style.width = "500px";
        cur_img.style.height = "250px";
        cur_img.style.left = "100px";
        cur_img.style.top = "500px";
        cur_img.style.position = "relative";
    }*/
    var t = setTimeout("move()",10);

}
function move()
{
    var m = document.getElementById("numb");
    var xpos = parseInt(m.style.left);
    var ypos = parseInt(m.style.top);
    console.log ( parseInt(m.style.left) );
    if(xpos == 200 && ypos == 500)
    {
        return true;
    }
    if(xpos < 200){
        xpos++;
    }if(xpos > 200){
        
        xpos--;
    }
    if(ypos > 500){
       
        ypos--;
    }if(ypos < 500){
       
        ypos++;
    }
    m.style.left = xpos + "px";
    m.style.top = ypos + "px";
    var t = setTimeout("move()",10);
}

也就是说，这里如果***没有提前设置left和top属性，元素的这些属性默认是不存在的，因此获取不到。***
设置的方法可以有两种，第一种在HTML的tag里面设置style，第二种使用DOM，
var m = document.getElementById(“numb”);
m.style.left = “10px”;
m.style.top = “20px”;
m.style.position = “absolute”;
设置。

然而如果是在外部CSS中设置的style，DOM没有办法使用 document.getElementById获取

获取方法详见这篇博客写的挺好的