Menu
I’ve come across a rather nasty predicament. How do you determine value of offset* properties of an element in relative units? Because as far as I can tell, even in W3C DOM, the offset family will return a string in px.
MS has created a pos(Top, Left, Width, ect) family that will allow retrieval and arithmetic of dimensions in any unit, for as long as the unit remains consistant throughout the page. But what is the equivalent in DOM? Ironically enough DOM margin and padding will return a string in relative units.
It’s all fine and dandy that I can use getElementById to get Gecko’s attention, but if all my page’s units are in ’em’ it doesn’t help if I can’t use offsetWidth and offsetHeight.
Here’s an example:
[CODE]<script type=”text/javascript”>
var a = 1;
var b = 0.5;
var c = a + b;
alert(c);
</script>
Will display 1.5. But everytime I try to add using units (em, ex, cm, inch, px, ect) I can’t add them. I can’t manipulate the variables at all, even though I had this working at W3Schools, it doesn’t anymore….
So I guess this is a bigger problem than just offset* ? .
How do we create layouts based on relative units if we can’t retrieve the elements dimensions?
[i]Originally posted by Tage [/i]These values won't always hold true. If they did then all units would be absolute units. em for example depends on the text size, which is specified by the user.
[B]1em=16px
1ex=8px
1cm=38px
1in=96px
1mm=3.8px
1pt=1.33px
1pc=16px[/B][/QUOTE]
[i]Originally posted by lavalamp [/i]
[B]These values won't always hold true. If they did then all units would be absolute units. em for example depends on the text size, which is specified by the user. [/B][/QUOTE]
[CODE]el = document.getElementById(id);
elBorder = el.style.borderWidth + el.style.margin + el.style.padding;
childWidth = el.parentNode.offsetWidth - elBorder;
childHeight = el.parentNode.offsetHeight - elBorder;
alert(childWidth+" "+childHeight);
[/CODE][code]<script type="text/javascript">
var a = parseFloat("0.50em");
var b = parseFloat("1.75em");
var c = a + b;
var a1 = "0.50em";
var b1 = "1.75em";
var c1 = eval(a1 + b1);</script>
<a href="#" onmouseover="alert('a='+a+' b='+b);"
onmouseout="alert('c='+c);">a + b= c</a><br />
<a href="#" onmouseover="alert('a1='+a1+' b1='+b1);"
onmouseout="alert('c1='+c1);">a + b= c</a>[/CODE][CODE]
<style type="css/text">
#parent {
width: 20em;
height: 30em;
overflow: auto;
}
#child {
position: absolute;
width: 20em;
margin: 0.5em;
padding: 0.5em;
border: 0.1em solid black;
}
</style>
<script type="javascript/text">
el = document.getElementById(child);
elBorder = parseFloat(el.style.borderWidth) +
parseFloat(el.style.margin) +
parseFloat(el.style.padding);
childWidth = parseFloat(el.parentNode.style.width) -
elBorder + 'em';
childHeight = parseFloat(el.parentNode.style.height) -
elBorder + 'em';
alert(childWidth+" "+childHeight);
</script>[/CODE][CODE]var a1 = "0.50em";
var b1 = "1.75em";
var c1 = eval(a1 + b1);[/CODE] <i>
</i>
var a1 = "0.50em";
var b1 = "1.75em";
var c1 = eval(a1 + b1);
<i>
</i>
var a1 = "0.50em";
var b1 = "1.75em";
var c1 = num(a1) + num(b1);
[i]Originally posted by Tage [/i]
[B]Oh, is that what he wanted all along?[/B][/QUOTE]
<i>
</i>/* get number of pixels in 1 EM for a given element */
function getPxInEm(el)
{ //Create a temporary block element
tdiv = el.appendChild(document.createElement('div'));
with(tdiv.style)
{ margin = '0px'; //Set its margin to 0
padding = '0px'; //Set its padding to 0
border = 'none'; //Set its border to none;
height = '1em'; //Set its height to 1 em
width = '1em';
}
// Now the element's offsetHeight in pixels should represent 1EM
pxInEM=tdiv.offsetHeight;
// Delete the temporary block element
el.removeChild(tdiv);
// Return the value
return pxInEM;
}
[i]Originally posted by Vladdy [/i]
[B]From the first reply this whole discussion got on a wrong track (which again proves my point that little knowledge is more dangerous than complete ignorance ? ? ?)[/B][/QUOTE]
[B]While there are methods defined in DOM CSS Level 2 that allow to convert between font and pixel units, IE does not support them, and that makes their use hardly practical.[/B][/QUOTE]
[B]I find the following code to work fairly well in both IE and Gecko. [....] Now [I]for that element[/I] you can convert sizes between EMs and pixels [/B][/QUOTE]
[i]Originally posted by tonyh [/i]
[B]And, which properties do not exist or behave incorrectly in earlier versions of IE and NN? [/B][/QUOTE]
[i]Originally posted by Vladdy [/i]
[B]Tony, I never have a problem with people asking questions. I do have a problem with people providing an answer without sufficient knowledge on the subject.[/B][/QUOTE]
[B]My understanding of the question was how to convert between PX and font units EM when this ratio differs from element to element, browser to browser and user to user.[/B][/QUOTE]
[B]For example if you want to find this number for a document body you call the function:
getPxInEm(document.body) ;
or for any element:
getPxInEm(document.getElementById('myElement'));
So if you want to know the height of an element in EM you take it's offsetHeight which is in pixels and divide by value returned by the function.[/B][/QUOTE]
[CODE]el = document.getElementById('myElement');
parHeight = parseFloat(el.offsetHeight/getPxInEm(el));
parWidth = parseFloat(el.offsetWidth/getPxInEm(el));
/* Or set getPxInEm to a variable */
elPxInEm = getPxInEm(el);
parHeight = parseFloat(el.offsetHeight/elPxInEm);
parWidth = parseFloat(el.offsetWidth/elPxInEm);
[/CODE][B]It should work with NS6+ and IE5.5+ (maybe even IE5.0+) [/B][/QUOTE]
0.1.9 — BETA 5.18