如何使用JavaScript切换元素的边距?

时间:2013-01-09 22:18:39

标签: javascript html toggle

我试图通过更改边距将div移到一边,然后返回一个过渡。我有一个按钮,我想切换它的边距。 div向右移动,但是当我再次单击时,它不会移回到它的原始位置。这就是我所拥有的:

HTML

<div id="movingdiv">
<a href="#" onclick="toggle()">Click Me!</a>
</div>

CSS

#movingdiv {
overflow: hidden;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: gray;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}

的JavaScript

function toggle () {

var el = document.getElementById("movingdiv");
if ( el.style.marginLeft="250px" ) {

    el.style.marginLeft="250px";

}

else {

    el.style.marginLeft="0px";

}

}

这里有效: http://codepen.io/dakoder/pen/nfimJ

3 个答案:

答案 0 :(得分:5)

你正在做作业,而不是检查平等。此外,您的else条件和if条件混合在一起。将其更改为以下内容:

if ( el.style.marginLeft==="250px" ) {
    el.style.marginLeft="0px";
} else {
    el.style.marginLeft="250px";
}

答案 1 :(得分:1)

更改为

if ( el.style.marginLeft==="250px" ) {

答案 2 :(得分:1)

if ( el.style.marginLeft="250px" ) {

这是分配,而不是比较。使用===,或!==如果你想切换保证金(似乎是你的意图)。