Menu
object.style.fontSize returning empty if set via css. But works if set using the style attribute directly on the object within html.
Is there some trick to making this work when it is set via CSS?
For instance:
<!DOCTYPE html>
<html lang="en-us">
<head>
<style>
#Set_With_CSS_Style_Sheet
{
font-size:14pt;
}
</style>
</head>
<body onload=loaded()>
<!-- Both of these correctly sets the font size -->
<!-- JavaScript retrieves the font size when set in this manner (via style attribute). -->
<div id="Set_With_Style_Attribute" style="font-size:10pt">CSS Font Size Test:10pt</div>
<!-- JavaScript returns empty when set in this manner (via css style sheet). -->
<div id="Set_With_CSS_Style_Sheet">CSS Font Size Test: 14pt</div>
<script type="text/javascript">
function loaded() {
alert("Set With Style Attribute: " + this.document.getElementById("Set_With_Style_Attribute").style.fontSize);
alert("Set With Style Sheet: " + this.document.getElementById("Set_With_CSS_Style_Sheet").style.fontSize);
}
</script>
</body>
</html>
246
When the font size is set by a style sheet the fontSize property will return "", instead you should use window.getComputedStyle.
window.getComputedStyle(document.getElementById('ID'), null).getPropertyValue('font-size');
answered Mar 24 '26 20:03
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With