javascript - 如何在一个方向上改变 元素的宽度？

Question

我正在尝试更改 <hr> 的宽度元素与 jQuery 但它改变了 2 个方向的宽度。我只希望它拉伸(stretch)到右侧。当我对我的应用程序执行某些操作时，变量 food.runningDistance 会发生变化。代码:

HTML :

<hr id="runningLine">

javascript:

$("#runningLine").animate({width: food.runningDistance}, 500);

Answer 1

hr 元素的行为类似于为其设置了 margin: 0 auto。正如我在对您的问题的评论中所述，我会使用 div 因为 hr 是 supposed to mark a thematic break ，但您将其用于其他目的。

如果你仍然想让它按你想要的方式工作，你必须设置 margin-left: 0;右边距:0；:

$("#runningLine").css("margin", 0).animate({width: "10%"}, 3000);

<hr id="runningLine">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>