Getting actual width of span element

[August Karlstrom]

Hi,

I'm trying to get the width of a span element (with clientWidth) but the
browser does not take the font size setting in an external stylesheet
into account. If I add the font size setting directly to the HTML
document (in a style element or inline) I get the correct value. Any ideas?


Thanks,

August

 

[Jorge]

Hi,

I'm trying to get the width of a span element (with clientWidth) but the
browser does not take the font size setting in an external stylesheet
into account. If I add the font size setting directly to the HTML
document (in a style element or inline) I get the correct value. Any ideas?

Thanks,

element.offsetWidth

 

[August Karlstrom]

element.offsetWidth

Sorry, it's offsetWidth that I use, not clientWidth as I stated so the
problem persists.


August

 

[Thomas Allen]

I'm trying to get the width [...] but the browser does not take the
font size setting in an external stylesheet into account.

offsetWidth just returns the width of the element's box, and font
sizes are accounted for when sizing said box. The way that the styles
are loaded, to the best of my knowledge, is irrelevant in this
regard.

Perhaps your script that measures the element is executing before the
external CSS has finished loading, or is applied to the element in
question? That may explain why your <style> version works as expected,
should that tag occur in the document before your script (as a rule of
thumb, and not for scripting reasons, I and others recommend loading
scripts after stylesheets).

Thomas

 

[Thomas 'PointedEars' Lahn]

I'm trying to get the width of a span element (with [offsetWidth]) but the
browser does not take the font size setting in an external stylesheet
into account. If I add the font size setting directly to the HTML
document (in a style element or inline) I get the correct value. Any
ideas?

ISTM you have a CSS problem, not a script/DOM problem.


PointedEars

 

[August Karlstrom]

Thomas Allen wrote:
[...]

Perhaps your script that measures the element is executing before the
external CSS has finished loading, or is applied to the element in
question? That may explain why your <style> version works as expected,
should that tag occur in the document before your script (as a rule of
thumb, and not for scripting reasons, I and others recommend loading
scripts after stylesheets).

Thanks for your suggestions. I found out what the problem was and my
conclusion was wrong. In the code I dynamically add a class to the
parent element of the span element but I did that after getting the span
width when I of course should add the class before getting the width.
Silly me.


August

 

[August Karlstrom]

I'm trying to get the width of a span element (with [offsetWidth]) but the
browser does not take the font size setting in an external stylesheet
into account. If I add the font size setting directly to the HTML
document (in a style element or inline) I get the correct value. Any
ideas?

ISTM you have a CSS problem, not a script/DOM problem.

Thanks for the input. Well it turned out to be a script problem but my
conclusion was wrong (see my reply to Thomas Allen).


August

 

[Thomas 'PointedEars' Lahn]

I'm trying to get the width of a span element (with [offsetWidth]) but
the browser does not take the font size setting in an external
stylesheet into account. If I add the font size setting directly to the
HTML document (in a style element or inline) I get the correct value.
Any ideas?

ISTM you have a CSS problem, not a script/DOM problem.

Thanks for the input. Well it turned out to be a script problem but my
conclusion was wrong (see my reply to Thomas Allen).

I'd say it was both The actual width could not be that which you
expected (script problem) as there was no stylesheet to apply to the element
(CSS problem) which was caused by your not adding the class reference
beforehand (script problem).

You're welcome.


PointedEars