Question

我试图按下一个按钮，当点击它会改变我的div位置时，我已经这样做了：

＆＃13;

function myFunctionkomp1()
{
    document.getElementsByClassName("MyDiv")[0].style.top="300px";
}

＆＃13;

<button onclick="myFunctionkomp1();" id="btnmenukomp"></button>
<div class="MyDiv" style="position: relative;"></div>

＆＃13;

它确实有效，但唯一的问题是，当我第二次点击它时，边距顶部将变为0（默认值）。

有人可以帮帮我吗？

Answer 1

function myFunctionkomp1()
{
    if(document.getElementsByClassName("MyDiv")[0].style.top == '300px'){
        document.getElementsByClassName("MyDiv")[0].style.top="0px";    
    }else{
        document.getElementsByClassName("MyDiv")[0].style.top="300px";  
    }
}

Answer 2

我不会给你如何做的代码，但一个好的方法是做一个在top = 0px和top = 300px之间改变的“切换”。这样第一次点击进入顶部= 300px，第二次点击将返回顶部= 0px，第三次点击将返回到300px等。

Answer 3

添加某种切换功能。例如：

var top = document.getElementsByClassName("MyDiv")[0].style.top;
top = top === '300px' ? 0 : '300px';
document.getElementsByClassName("MyDiv")[0].style.top = top;

这是一个小提琴：https://jsfiddle.net/ubL3hx2w/

Answer 4

你需要一个像这样的切换变量（有更短的方法可以做到这一点，但为了说明代码在做什么我用这种方式编写：

<script>
var toggle=true;
function myFunctionkomp1()
{
    if(flip) { 
        document.getElementsByClassName("MyDiv")[0].style.top="300px";
        toggle=false;
    }
    else {
        document.getElementsByClassName("MyDiv")[0].style.marginTop="0px";
        toggle=true;
    }
}
</script>

按钮onclick更改元素位置时的Javascript

4 个答案: