Height

scott100

05-29-2006, 11:18 PM

Hi, i am trying to find the width of characters in an element like so but it's coming up blank
<head>
<script>
function check(){
var val=document.getElementById('mydiv').style.width;
alert(val);
}
</script>
</head>

<body onload="check()">
<div id="mydiv">I am a div</div>
</body>

I know that if i add style="width:100%" to the div then the function would return 100% but say i wanted to find how much width the above paragraph actually took up (ie looks about 40px), is this possible :confused:

mrhoo

05-30-2006, 03:37 AM

If you don't set the size expicitly on a block level element
it will take up as much space as there is in the window.
But you'll only get a property for style.width if you set the style width inline.

This code will give you the size of the element passed as an argument-
It returns an array of two integers- [width,height];

function elSize(hoo){
return Math.max(hoo.scrollWidth,hoo.offsetWidth),
Math.max(hoo.scrollHeight,hoo.offsetHeight)];
}

scott100

05-30-2006, 11:33 AM

That would give you the width of the element, not how much room the characters took up.

I managed to figure it out without setting the width inline

document.defaultView.getComputedStyle(docObj, "").getPropertyValue(property)

_Aerospace_Eng_

05-30-2006, 11:57 AM

Interesting. Where did you find that?

scott100

05-30-2006, 01:57 PM

mr know it all... Google :thumbsup:

vwphillips

05-30-2006, 07:19 PM

one of my standard functions

function zxcGetStyle(zxcel,zxcs){
if (zxcel.currentStyle){ return zxcel.currentStyle[zxcs]; }
if (window.getComputedStyle){ return document.defaultView.getComputedStyle(zxcel,null).getPropertyValue(zxcs); }
return false;
}

modified from QirksMode