In the example below it appears JavaScript can't read a style property if it's not specifically defined with JavaScript before, ie you can't get a value in this way:
var testboxWidth = document.getElementById("testbox").style.width;
before defining it previously like this:
document.getElementById("testbox").style.width = "200px";
Is there a way to read such style properties directly?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Box Dimensions Experiment</title>
<style type="text/css">
<!--
#testbox {
font-family: Verdana, Geneva, sans-serif;
margin: 10px;
padding: 5px;
height: 350px;
width: 200px;
border: 3px solid #09F;
background-color: #FF6;
font-size: 12px;
text-align: justify;
overflow: scroll;
position: absolute;
top: 20px;
left: 20px;
}
#testbox2 {
font-family: Verdana, Geneva, sans-serif;
margin: 10px;
padding: 5px;
height: 350px;
width: 200px;
border: 3px solid #09F;
background-color: #FF6;
font-size: 12px;
text-align: justify;
overflow: auto;
position: absolute;
top: 20px;
left: 250px;
}
#testbox3 {
font-family: Verdana, Geneva, sans-serif;
margin: 10px;
padding: 5px;
height: 350px;
width: 200px;
border: 3px solid #09F;
font-size: 12px;
text-align: justify;
overflow: auto;
position: absolute;
top: 20px;
left: 480px;
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#000000, strength=10)";
filter: progid:DXImageTransform.Microsoft.Glow(color=#000000, strength=10);
color: #9CF;
}
#testbox4 {
font-family: Verdana, Geneva, sans-serif;
margin: 10px;
padding: 5px;
height: 350px;
width: 200px;
border: 3px solid #09F;
background-color: #FF6;
font-size: 12px;
text-align: justify;
overflow: auto;
position: absolute;
top: 20px;
left: 710px;
}
.boldtext {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
text-transform: capitalize;
}
#statusbar {
position:absolute;
width:889px;
left: 20px;
top: 425px;
border-top-style: outset;
border-right-style: outset;
border-bottom-style: outset;
border-left-style: outset;
margin: 10px;
background-color: #C0C0A0;
border-top-color: #39F;
border-right-color: #39F;
border-bottom-color: #39F;
border-left-color: #39F;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
padding: 5px;
overflow: auto;
}
-->
</style>
<script type="text/javascript">
<!--
function startCalculation(){
document.getElementById("testbox").style.width = "200px";
measureDiv(document.getElementById("testbox"));
measureDiv(document.getElementById("testbox2"));
measureDiv(document.getElementById("testbox3"));
measureDiv(document.getElementById("testbox4"));
}
function measureDiv(obj) {
var sbContents = "";
sbContents += '<p><span class="boldtext">' + obj.id + '</span><br />';
sbContents += 'clientWidth = ' + obj.clientWidth + '; ';
sbContents += 'clientHeight = ' + obj.clientHeight + '; ';
sbContents += 'offsetWidth = ' + obj.offsetWidth + '; ';
sbContents += 'offsetHeight = ' + obj.offsetHeight + '; ';
sbContents += 'scrollWidth = ' + obj.scrollWidth + '; ';
sbContents += 'scrollHeight = ' + obj.scrollHeight + '; ';
///*
sbContents += 'style.width = ' + obj.style.width + '; ';
sbContents += 'style.height = ' + obj.style.height + '; ';
//*/
sbContents += 'padding = ' + obj.style.padding + '; ';
sbContents += 'border = ' + obj.style.border + '; ';
sbContents += 'margin = ' + obj.style.margin + '.</p>';
document.getElementById("statusbar").innerHTML += sbContents;
document.getElementById("statusbar").style.height = document.getElementById("statusbar").scrollHeight + "px";
}
//-->
</script>
</head>
<body onload="startCalculation()">
<div id="testbox"><span class="boldtext">testbox. Scroll = on</span><br />height: 350px; width: 200px; border: 3px; margin: 10px; padding: 5px<br />Some films of relevant ancient settings, such as Sebastiane and The Passion of the Christ, have been made with dialogue in Latin for purposes of realism. Occasionally, Latin dialogue is used because of its association with religion or philosophy, in such film/TV series as the Exorcist and Lost (Jughead). Subtitles are usually employed for the benefit of audiences who do not understand Latin. There are also songs written with Latin lyrics.</div>
<div id="testbox2"><span class="boldtext">testbox2. Normal</span><br />
height: 350px; width: 200px; border: 3px; margin: 10px; padding: 5px<br />
Some films of relevant ancient settings, such as Sebastiane and The Passion of the Christ, have been made with dialogue in Latin for purposes of realism. Occasionally, Latin dialogue is used because of its association with religion or philosophy, in such film/TV series as the Exorcist and Lost (Jughead). Subtitles are usually employed for the benefit of audiences who do not understand Latin. There are also songs written with Latin lyrics.</div>
<div id="testbox3"><span class="boldtext">testbox3. Shadow Filter</span><br />
height: 350px; width: 200px; border: 3px; margin: 10px; padding: 5px; Glow (color = #000000, strength = 10)<br />Some films of relevant ancient settings, such as Sebastiane and The Passion of the Christ, have been made with dialogue in Latin for purposes of realism. Occasionally, Latin dialogue is used because of its association with religion or philosophy, in such film/TV series as the Exorcist and Lost (Jughead). Subtitles are usually employed for the benefit of audiences who do not understand Latin. There are also songs written with Latin lyrics.</div>
<div id="testbox4"><span class="boldtext">testbox4. Text overflows</span><br />
height: 350px; width: 200px; border: 3px; margin: 10px; padding: 5px<br />Some films of relevant ancient settings, such as Sebastiane and The Passion of the Christ, have been made with dialogue in Latin for purposes of realism. Occasionally, Latin dialogue is used because of its association with religion or philosophy, in such film/TV series as the Exorcist and Lost (Jughead). Subtitles are usually employed for the benefit of audiences who do not understand Latin. There are also songs written with Latin lyrics. Some films of relevant ancient settings, such as Sebastiane and The Passion of the Christ, have been made with dialogue in Latin for purposes of realism. Occasionally, Latin dialogue is used because of its association with religion or philosophy, in such film/TV series as the Exorcist and Lost (Jughead). Subtitles are usually employed for the benefit of audiences who do not understand Latin. There are also songs written with Latin lyrics.</div>
<div id="statusbar"></div>
</body>
</html>
function getStyle(elemId,styleAtt) {
var value;
var elem = document.getElementById(elemId);
if (elem.currentStyle) {
value = elem.currentStyle[styleAtt];
} else if (window.getComputedStyle) {
value = document.defaultView.getComputedStyle(elemId,null).getPropertyValue(styleAtt);
}
alert('width = '+value);
}
Thank you Vic and tirna for your promt answers!
So the style properties are acessed via the
document.defaultView.getComputedStyle() method.
Tirna, from what I have referenced, it said:
""Not supported in IE, which uses the "currentStyle" property instead.""
Perhaps what is meant is by older IE versions?
Reply With Quote
Bookmarks