I am just starting to tinker with Javascript and CSS so sorry if this is a simple question.
I have my CSS code in its own file and I am trying to use Javascript to access style information from a <DIV> tag that is pulling form this file. For some reason I am not getting any data back.
Here is an example of my JS and HTML code.
<SCRIPT language="JavaScript">
var testObj = document.getElementByID("main_panel");
window.alert(testObj.style.width);
</SCRIPT>
<BODY>
<DIV id="main_panel">Test Text</DIV>
<?BODY>
My CSS file looks like this
#main_panel { position: absolute;
left: 160px;
top: 110px;
width: 480px;
overflow: auto;
visibility: visible;
z-index: 1 }
When I run the HTML I get an alert window but no text telling me the width of the object. This happens for any style element I try to access
Any Help anyone could provide would be greatly appreciated!!!The object you want to access must exist when you access it. Javascript is an interpreter, and inline statements are executed as they are read from the file. The DIV does not exist when the statement is executed. You must wait until the DIV is rendered. This is usually done using the onload event.
<SCRIPT language="JavaScript">
window.onload = mytest;
function mytest() {
var testObj = document.getElementByID("main_panel");
window.alert(testObj.style.width);
}
</SCRIPT>For your information, note also the "offsetWidth" property, which contains the "calculated" width of the object in pixels.
Also, note that the "offsetWidth" property is a direct property of the element.
<SCRIPT language="JavaScript">
window.onload = mytest;
function mytest() {
var testObj = document.getElementByID("main_panel");
window.alert(testObj.style.width);
window.alert(testObj.offsetWidth);
}
</SCRIPT>
Also, you will need to be wary of box models. In Mozilla the "width" sets and gets just the content with. In I.E. the "width" includes padding and border.
- see:
<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/box.html">http://www.w3.org/TR/REC-CSS2/box.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://webfx.eae.net/dhtml/boxsizing/boxsizing.htmlThanks">http://webfx.eae.net/dhtml/boxsizing/bo ... htmlThanks</a><!-- m --> for your help all!!!!
window.alert(testObj.offsetWidth);
worked but
window.alert(testObj.style.width);
did not Any idea why? I would like to access other style information of the testObj.
Once again any help that could be provided would be greatly appreciated!!Originally posted by MithrilRain
worked but
window.alert(testObj.style.width);
did not Any idea why? I would like to access other style information of the testObj.
You may only access inline styles through the style property.I think also that "testObj.style.width" did not work because the "width" property was set in a CSS style sheet rather than in the inline style object for the DIV itself.
I.e.
if you had
<div style="width:100px>My Div</div> it should work.
But as the width was in the CSS sheet, it cannot be accessed through the objects "style" property.
"offsetWidth" works because that is a dynamic property, which shows the final calculated width, taking account of CSS styles, and specific object styles, etyc.
There is also
"currentStyle" (or in Mozilla I thing it is getComputedStyle()) which can I think access the CSS style object
There is also (in IE only)
"runtimeStyle" which is a temporary style which you can apply to an object, overriding all other objects only whilst the page is being displayed.
I have my CSS code in its own file and I am trying to use Javascript to access style information from a <DIV> tag that is pulling form this file. For some reason I am not getting any data back.
Here is an example of my JS and HTML code.
<SCRIPT language="JavaScript">
var testObj = document.getElementByID("main_panel");
window.alert(testObj.style.width);
</SCRIPT>
<BODY>
<DIV id="main_panel">Test Text</DIV>
<?BODY>
My CSS file looks like this
#main_panel { position: absolute;
left: 160px;
top: 110px;
width: 480px;
overflow: auto;
visibility: visible;
z-index: 1 }
When I run the HTML I get an alert window but no text telling me the width of the object. This happens for any style element I try to access
Any Help anyone could provide would be greatly appreciated!!!The object you want to access must exist when you access it. Javascript is an interpreter, and inline statements are executed as they are read from the file. The DIV does not exist when the statement is executed. You must wait until the DIV is rendered. This is usually done using the onload event.
<SCRIPT language="JavaScript">
window.onload = mytest;
function mytest() {
var testObj = document.getElementByID("main_panel");
window.alert(testObj.style.width);
}
</SCRIPT>For your information, note also the "offsetWidth" property, which contains the "calculated" width of the object in pixels.
Also, note that the "offsetWidth" property is a direct property of the element.
<SCRIPT language="JavaScript">
window.onload = mytest;
function mytest() {
var testObj = document.getElementByID("main_panel");
window.alert(testObj.style.width);
window.alert(testObj.offsetWidth);
}
</SCRIPT>
Also, you will need to be wary of box models. In Mozilla the "width" sets and gets just the content with. In I.E. the "width" includes padding and border.
- see:
<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/box.html">http://www.w3.org/TR/REC-CSS2/box.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://webfx.eae.net/dhtml/boxsizing/boxsizing.htmlThanks">http://webfx.eae.net/dhtml/boxsizing/bo ... htmlThanks</a><!-- m --> for your help all!!!!
window.alert(testObj.offsetWidth);
worked but
window.alert(testObj.style.width);
did not
Any idea why? I would like to access other style information of the testObj.Once again any help that could be provided would be greatly appreciated!!Originally posted by MithrilRain
worked but
window.alert(testObj.style.width);
did not
Any idea why? I would like to access other style information of the testObj. You may only access inline styles through the style property.I think also that "testObj.style.width" did not work because the "width" property was set in a CSS style sheet rather than in the inline style object for the DIV itself.
I.e.
if you had
<div style="width:100px>My Div</div> it should work.
But as the width was in the CSS sheet, it cannot be accessed through the objects "style" property.
"offsetWidth" works because that is a dynamic property, which shows the final calculated width, taking account of CSS styles, and specific object styles, etyc.
There is also
"currentStyle" (or in Mozilla I thing it is getComputedStyle()) which can I think access the CSS style object
There is also (in IE only)
"runtimeStyle" which is a temporary style which you can apply to an object, overriding all other objects only whilst the page is being displayed.