Javascript 如何使按钮在单击后更改其位置？

我怎样才能让一个按钮在像这样被点击后改变它的位置，但我希望它不是活动参数，而是在

左边距：50px点击后确定

HTML

以下是一个简单的解决方案：


JavaScript:

/* Toggles the style class on click */

$("button").click(function() {
    $(".button").toggleClass("buttonLeft");
});

CSS:

您需要使用JavaScript：

var d = document.getElementById("button");
d.addEventListener('click',function(){
    d.className = d.className + " move";
});

演示：

或者，如果您已经在使用jQuery：

$('.button').click(function(){
    $(this).addClass('move');
});

演示：
这不会最终移动按钮，如果用户再次单击，它将返回到原始位置。这不完全是javascript，这是jQuery，没有问题的jQuery标记…@TilwinJoy公平地说，也没有javascript标记开始。这可能是OP不知道他需要什么的情况，但是他愿意考虑多个选项。jQuice是一个JavaScript库。因此，它是一个使用jQuery的基于JavaScript的解决方案。这是一个无限期改变它的小把戏：添加了JavaScript标记<代码>onClick

功能在CSS中不可行。有像

：target

黑客这样的东西可以实现这一点，但它们不可靠/语义。然而，看起来类似的功能在未来也会出现。我在@Mooseman这里做错了什么？jsfiddle.net/qUjDa仅当我单击按钮右侧或下方时，该按钮才会移动it@Chun事件不会从

iframe

内部冒泡。单击右侧或下方位于

iframe

外部和

按钮内部，这就是它工作的原因。我如何才能做到这一点？我已经尝试了几个小时，但我不知道如何让fb按钮做到这一点：\@Chun使用Facebook API，如中所示。
.buttonLeft {margin-left:50px;} /* But with a on clicked parameter instead of active */

var d = document.getElementById("button");
d.addEventListener('click',function(){
    d.className = d.className + " move";
});

$('.button').click(function(){
    $(this).addClass('move');
});