Calculating the actual content width or height

dhtml · Dec 21, 2008

David said:
Interesting. Whey not just save the inline padding style?

Shorthand values don't always return the value you gave it.

<div style="padding: 10px 0">
</div>

var s = div.style.padding;

Variable - s - might be empty string in some browsers. It is in Safari
2. So, if it were saved and then put back, you'd end up removing padding.

A similar problem occurs with getComputedStyle(el,'').padding. Most
browsers return empty string instead of a shorthand value.

Feature test with a side effect.

Garrett

Thomas 'PointedEars' Lahn · Dec 21, 2008

dhtml said:
Shorthand values don't always return the value you gave it.

That's no good reason at all to resort to inefficient text parsing.

<div style="padding: 10px 0">
</div>

var s = div.style.padding;

Variable - s - might be empty string in some browsers. It is in Safari
2. So, if it were saved and then put back, you'd end up removing padding.

A similar problem occurs with getComputedStyle(el,'').padding. Most
browsers return empty string instead of a shorthand value.

"Most" is wishful (or paranoid) thinking. In any case, you have
paddingLeft, paddingTop, paddingRight, and paddingBottom.

Feature test with a side effect.

A good feature test would handle that.

PointedEars

David Mark · Dec 21, 2008

Shorthand values don't always return the value you gave it.

<div style="padding: 10px 0">
</div>

var s = div.style.padding;

Variable - s - might be empty string in some browsers. It is in Safari
2. So, if it were saved and then put back, you'd end up removing padding.

That's an interesting quirk. Normally I avoid shorthand for things
like this.

A similar problem occurs with getComputedStyle(el,'').padding. Most
browsers return empty string instead of a shorthand value.

I would expect all of them to! Certainly I wouldn't use shorthand
with getComputedStyle.

[snip]

dhtml · Dec 22, 2008

David said:
That's an interesting quirk. Normally I avoid shorthand for things
like this.

And if you had:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>height test </title>
</head>
<body style="padding-top: 1px">
</body>
</html>

then:
document.body.style.padding == ""

- is true in FF 3, OP 9.5, Safari.

setting cssText seems to work pretty well. Thomas seems to think that
the browser having to parse the string would be inefficient. I'm not
sure if he tested this or not.

I would hope the browser would have optimized the css parsing. I do not
know if storing and setting individual t/l/b/r property values would be
faster. It's a little more cumbersome than getting and setting cssText.

Garrett

Clickable Div Block	1	Oct 13, 2023
How can I add arrows to my FAQ	0	Aug 9, 2023
Closing an overlay outside the overlay as well	1	Dec 11, 2022
Calculating height based on width and aspect ratio?	11	Sep 26, 2011
Image shifts to the right when export the page to pdf	4	May 5, 2023
Hover state on an element stuttering when I'm close to the edge, or move my mouse really fast	1	Feb 2, 2023
Having difficulty with the layout of these images / video for this web page	2	Jul 5, 2022
I am trying to detect Which image id="" was clicked ?	22	Jan 3, 2023

Calculating the actual content width or height

dhtml

Thomas 'PointedEars' Lahn

David Mark

dhtml

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads