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

我想在用户单击按钮触发事件时，向div元素添加一个左边距css样式，然后在用户再次单击按钮时将其删除

这是div元素：

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

Javascript应将其更改为：

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

---

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

在事件侦听器中尝试以下操作：

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

这不会使它产生动画效果。你可以考虑使用CSS来做：

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

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

在发布此类问题之前，你应该先阅读

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

要回滚：

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

您可以与

marginleft

css属性一起使用。

animate

的第二个参数是持续时间（以毫秒为单位）。还有一系列其他设置允许更精细地控制动画（例如，放松输入或输出）

把它移到相反的位置

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

---

实例：

试试这个解决方案，我刚刚进入了JSBin:

纯javascript或jquery？虽然这从理论上可以回答这个问题，但在这里包括答案的基本部分，并提供链接供参考。非常好，谢谢。很少有经验，所以活生生的例子有帮助me@Jamiec我不知道。就连索尤卡的回答也被否决了，而且两人都非常好。

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