Peter said:
Hi,
Since I can do this
document.defaultView.getComputedStyle(el, null).height;
why would I ever want to do this
document.defaultView.getComputedStyle(el,
null).getPropertyValue('height');
The first syntax requires property name in camelCase; the second syntax
takes property name as it is. This way it could be possible to choose
the most convenient way for a particular situation w/o normalizing all
involved names. But as IE currentStyle takes only camelCase anyway, the
second syntax didn't go into wide use.
Also please note that as you are asking for *computed* (current) style,
you are getting normalized value back (how is it internally stored by
UA, so not necessarily how it is indicated in the source). For the
second reason the whole getComputedStyle interface is used only rather
occasionally for specific tasks - yet for these tasks it is very
useful.
// See the sample:
<html>
<head>
<title>Styles</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
color: #000000;
background-color: #FFFFFF;
}
h1 {
background-color: yellow;
}
</style>
<script type="text/javascript">
function init() {
var header = document.getElementsByTagName('h1')[0];
if ((document.defaultView)
&& (document.defaultView.getComputedStyle)) {
window.alert(document.defaultView
.getComputedStyle(header,null).backgroundColor);
window.alert(document.defaultView
.getComputedStyle(header,null)
.getPropertyValue('background-color'));
}
else if (header.currentStyle) {
window.alert(header.currentStyle.backgroundColor);
}
}
window.onload = init;
</script>
</head>
<body>
<h1>Lorem ipsum</h1>
</body>
</html>
