2012-05-04 3 views
0

Это довольно легко получить ширину или высоту Div или Span, который содержит некоторые не форматированный текст, как, например:Получение динамической высоты ширины DIV или Span с форматированный текст

<div>Hello World</div> 

, используя ширину JQuery (в) или height(). То же самое, кажется, не работает для форматированных текстовых элементов, как на примере ниже:

<span id="caption" class="caption" style="left: 406px; top: 357.5px;"> 
<textformat leading="2"> 
    <p align="LEFT"> 
     <font face="Verdana" color="#FFFFFF" size="4" kerning="0" letterspacing="0"> 
      <b>TYPE</b><b><i>iorad</i></b>and<b>PRESS ENTER</b> 
     </font> 
    </p> 
</textformat> 
</span> 

Этот пример содержит некоторые отформатированные текстовые элементы, которые отображаются хорошо при рендеринге страницы HTML. Но когда мы пытаемся получить динамическую ширину или высоту он либо возвращает 0 или NULL, как показано ниже:

$(".caption").width() returns 0 

Любые идеи на решение, чтобы получить динамическую высоту ширину от JQuery или JS?

+4

теги шрифта? шутки в сторону? Кроме того, вы не можете поместить [элементы блока] (https://developer.mozilla.org/en/HTML/Block-level_elements) внутри [встроенных элементов] (https://developer.mozilla.org/en/HTML/) Inline_elements) – Joseph

+0

попробуйте .outerWidth() –

+0

и этот текстовый формат ... и кернинг собственности! будет google позже. – bondythegreat

ответ

1

Это потому, что HTML-код нарушен.

Вы не можете иметь элемент блока (p) внутри встроенного элемента (span), поэтому браузер пытается исправить код. Определенный браузер, который вы пробовали это, сделал это, перемещая элемент блока вне встроенного элемента, оставив встроенный элемент пустым.

+0

В HTML5 вы можете теоретически поместить элемент блока внутри встроенных элементов, хотя спецификации нечеткие ... Это запрещено, когда« стили по умолчанию могут привести к путанице ». Поэтому да, в этом случае это будет считаться недействительным, но общее правило «вы не можете иметь элементы блока внутри встроенных элементов» больше не истинно, поскольку вы можете f.ex поместить 'h1' внутри тега' a', используя допустимая разметка HTML5. – David

+0

@David Да, но это выглядит скорее как HTML 3, чем HTML 5 ... – Guffa

+0

Я бы сказал, что HTML5 больше похож на HTML3, чем на HTML4;) – David

Смежные вопросы