Varies by browser, and you will get various values as well, as far as whether they are expressed as pixels (with or without decimals), points, 'normal' (at times if there's none explicitly set for it anywhere), perhaps others.
That said, here's a demo:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
a {
display: inline-block;
background-color: #000;
color: #fff;
line-height: 120%;
}
a:hover {
background-color: #fff;
color: #000;
}
</style>
</head>
<body>
<a id="test" href="#">Test</a>
<script type="text/javascript">
(function(){
var dash = /-(.)/g;
function toHump(a, b){return b.toUpperCase();};
String.prototype.encamel = function(){return this.replace(dash, toHump);};
})();
function getStyle(el, styleprop){
el = document.getElementById(el);
if(window.getComputedStyle){
return document.defaultView.getComputedStyle(el, null).getPropertyValue(styleprop);
}
else if(el.currentStyle){
return el.currentStyle[styleprop.encamel()];
}
return null;
}
alert(getStyle('test', 'line-height'));
</script>
</body>
</html>
Note: For the IE family of browsers, this requires IE 5.5+ or there will be an error. For all others, including IE 5.5+ it will return some value or, if it cannot use either of the two methods, null.
Get an element's computed line-height
Reply With Quote
Bookmarks