Question

我这里有这个代码：

function slideUp(elem,num,speed,lim){
    var pos = document.getElementById(elem).style.top
    var moveUp = num
    if(lim != pos){
        var int = setInterval(function(){
            moveUp = moveUp-100;
            document.getElementById(elem).style.top=+moveUp+"px";
        },speed)
    }else if(lim == pos){
        clearInterval(int);
    }   
}

我遇到的问题是“pos”变量没有值。我希望它保持我指定的元素的顶部位置

Answer 1

我认为您的问题是document.getElementById(elem).style.top没有值，因此pos没有值。

您需要自己计算财产。您需要使用currentStyle / getComputedStyle，因为style.top值可以来自CSS，也可以隐式定义。

来自：http://www.quirksmode.org/dom/getstyles.html

function getStyle(el,styleProp)
{
    var x = document.getElementById(el);
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}

使用类似：

var top = getStyle(document.getElementById(elem), 'top');

Answer 2

直接从样式对象中读取通常不起作用，因为只有在从JavaScript设置这些值时才会填充它。要获取从HTML或CSS设置的值，请使用getComputedStyle查询元素的实际应用样式。

请参阅Mozilla文档中的此示例：

function getTheStyle() {
    var elem= document.getElementById("elem_container");
    var theCSSprop= window.getComputedStyle(elem,null).getPropertyValue("height");
    document.getElementById("output").innerHTML= theCSSprop;
}

Answer 3

我在这里看到两个完全不同的问题：

将“int”变量声明为该函数的局部变量，这意味着一旦调用该函数设置了一个间隔计时器，任何东西都无法清除它，因为该值将丢失。我猜你可以将变量设为全局变量。
最有可能的是，你没有获得“顶级”位置，因为元素本身没有直接提供的样式信息。如果样式来自CSS或基本浏览器布局，则“样式”属性不会告诉您。

获得风格是一种痛苦，它在IE中与其他浏览器不同。 van Campen先生的回答描述了如何获得它。

哦，在键盘上找到分号键： - ）

Answer 4

function slideUp(elem,num,speed,lim){
    var pos = document.getElementById(elem).style.top
    var moveUp = num
    if(lim != pos){
        var int = setInterval(function(){
            moveUp = moveUp-100;
            pos += moveUp;
            document.getElementById(elem).style.top=pos+"px";
        },speed)
    } else if(lim == pos) {
        clearInterval(int);
    }   
}

如何在变量中存储DOM样式属性

4 个答案: