如何将样式元素添加到div并使用javascript将其删除

Question

我想在用户点击按钮触发事件时向div元素添加margin-left css样式，然后在用户再次单击该按钮时将其删除。

这是div元素：

<div id="container" class="content">

Javascript应该将其更改为：

<div id="container" class="content" style="margin-left:354px">

理想情况下使用动画使其看起来向左滑动而不是跳跃。

Answer 1

在事件监听器中尝试：

var cont = document.getElementById("container");
cont.style.marginLeft = cont.style.marginLeft === "354px" ? "auto" "354px";

这不会使它生动。您可以考虑使用CSS：

#container {
    transition: margin-left ease 500ms;
}

但是如果你想支持旧的浏览器和IE9，请转到soyuka的答案。

Answer 2

在发布此类问题之前，您应该阅读manual ...

$('.content').animate({'margin-left':'354px'}, 1000); 
//where 1000 is the animation time in ms

回滚：

$('.content').animate({'margin-left':'auto'}); //or your previous value

Answer 3

尝试这个解决方案我刚刚进入JSBin：http://jsbin.com/oyemen/1/edit

Answer 4

您可以将jQuery.animate与margin-left css属性一起使用。 animate的第二个参数是持续时间（以毫秒为单位）。有许多其他设置可以更好地控制动画（例如，缓入或退出）。

$('#container').animate({'margin-left':'354px'},3000); 

并将其移回相反的

$('#container').animate({'margin-left':'0px'},3000); 

实例：http://jsfiddle.net/xdpCs/1/