How, using javascript, can you set or change a CSS value
from something to something else which has the IE
proprietary format: expression(javasriptCode)?
I'd like to know the answer in general, but the specific
issue motivating this is that I have an image in a TD
which I am able to nicely align left/right/center/top
bottom/middle and set (stretch) to various sizes.
I'd like to be able to set the image size as a percent
of the enclosing TD (and other more complicated
scenarios). In IE, setting imgElem.style.height
makes the image get stuck to the top (though sized
correctly).
So I have the idea that I could make imgElem.height be
an expression for IE and calculate the actual height
that I want the image to be. Now, I agree that I
could store the necessary multiplicative factor in
a window.heightFactor variable, or better yet, have a
dummy function that the expression points to (as in
the example below), but is that really the best way
to go???
Any ideas?
Thanks,
Csaba Gabor from Vienna
PS, for those who haven't seen it, here's a simple
example of this expression business (only works with IE):
<body style="margin:0">
<script type='text/javascript'>
function process(value) {
if (value.charAt(value.length-1)!="%")
return value;
var img=document.getElementById('img');
return(img.offsetParent.offsetHeight *
value.substring(0,value.length-1) / 100);
}
</script>
<form action=''>
<table border style="height:100%">
<tr><td style="height:5%">Enter ratio:
<input type=text name=foo></td></tr>
<tr><td valign=bottom align=center><img id=img
style="height:expression(process(document.forms[0][0].value))"
src='pic.jpg'></td></tr>
</form>
</body>
Note that if you leave out the 'process' in that expression, then as
you put in the '%' of 50% that the image will be sized at 50%, but
blasted to the top of the TD.
