Question

我在内部有一个简单的文字。我只是想从#maincontainer的右边到中心动画它。因此我做了一个计算，使其水平居中。我也试过了outerWidth()。它没用。这是代码。

<span id="headline">Hi There! Say hello to world.</span>

#maincontainer宽度为728m但是#headline容器每次都会给出错误的计算。

$("#headline").css({"top": (($("#maincontainer").height()-($("#headline").height()))/2)}).delay(1e3).animate({
    "right":  $("#maincontainer").width() - $("#headline").width() + "px"
},5e2);

Answer 1

1 / <span>作为内联元素，没有维度。要求他们将返回“未定义”。

使用CSS将<span>转换为内联块元素。

<span style="display:inline-block" id="headline">

为什么内联阻止而不阻塞？因为您只需要显示文本的宽度，而不是整个块的宽度（可能与容器相同）。

2 / 此外，如果先前未为元素定义宽度，width()或style.width将给出空白结果。

在这种情况下，请使用：$("#headline").offsetWidth

Answer 2

width()和height()方法不适用于display:inline样式的html元素。默认情况下，使用display:inline。{要获取宽度或高度，您可以使用display:block或display:inline-block。

在计算文本宽度时，Jquery width（）给出了错误的值

2 个答案: