JQuery width() дает неправильное значение при вычислении ширины текста

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> как встроенный элемент, не имеет размеров. Просить их вернуть "undefined".

Tranform <span> элемент встроенного блока с CSS.

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

Почему встроенный блок, а не блок? Потому что вы хотите только ширину отображаемого текста, а не ширину целого блока (как, например, контейнер).

2/ Кроме того, width() или style.width даст пустой результат, если ширина не был ранее определен для элемента.

В этом случае используйте: $("#headline").offsetWidth

Answer 2

width() и height() методы не работают на HTML элементах, которые имеют display:inline style.span по умолчанию с display:inline. для выбора ширины или высоты вы можете использовать display:block или display:inline-block.