View Full Version : Explain something to me... (external CSS and js fun)

05-29-2009, 09:51 AM
I've been playing with this workarouns for literally years, but I'm getting fed up with it. Can anyone here suggest a better way of dealing with the following conundrum - or at least clarify why it occurs?

When I have an external stylesheet I can't access the properties assigned therein.

I'll give an example - HTML/CSS/JS are all inseperate files - but everything is called into the HTML as you can see.


<script type="text/javascript" src="js.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<div id="box" onclick="showWidth()"></div>

CSS (style.css)

#box {
width: 200px;

Javascript (js.js)

function showWidth(){
var box = document.getElementById('box');

Now the alert fired by showWidth() is empty - meaning that javascript can't see the width of the div element 'box'

Now, if I assign width as part of the style attribute of the div javascript thus:


<script type="text/javascript" src="js.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<div id="box" onclick="showWidth()" style="width: 200px;"></div>

javascript can see this and the alert fired by showWidth() shows '200px'.

So, I have two questions:

1. Why?

2. Is there a way of accessing these external style elements without having to define styles inline all the time?


rnd me
05-29-2009, 09:57 AM
function getStyle(obj, cAttribute) {
if (obj.currentStyle) {
this.getStyle = function (obj, cAttribute) {
return obj.currentStyle[cAttribute];
} else {
this.getStyle = function (obj, cAttribute) {
return document.defaultView.getComputedStyle(obj, null)[cAttribute];
return getStyle(obj, cAttribute);
}//end getStyle

function showWidth(){
var box = document.getElementById('box');
alert(getStyle(box, "width"));

05-29-2009, 11:07 AM
Thanks rnd - thats precisely the code I need :)

I suppose it makes sense as well, I never thought to go digging around the DOM tree to get hold of the computed style. I'll be addin this little nugget to my snippets.

03-27-2010, 09:58 AM
hopefully this is what I need to fix a problem with my code too.

I have a JS that resizes a few div widths on my page but when i also have the styles in a seperate file the JS does not work.

this is my original code that works when i use the following line in my html.

function Div(id,hw,ud) {
var div=document.getElementById(id);
if (hw == "h"){
var h=parseInt(div.style.height)+ud;
if (h>=150){
div.style.height = h + "px";
//alert(hw + h);
} else if (hw == "w"){
var w=parseInt(div.style.width)+ud;
if (w>=150){
div.style.width = w + "px";
var inputdiv=document.getElementById('txt_message');
var inputw=parseInt(inputdiv.style.width)+ud;
inputdiv.style.width = inputw + "px";
var chat_div = document.getElementById('div_chat');
chat_div.scrollTop = chat_div.scrollHeight;

<div id="div_chat" style="height: 300px; width: 500px; overflow: auto; background-color: #CCCCCC; border: 1px solid #555555;"></div>

if i was to use the following instead

<div id="div_chat"></div>


#div_chat { height: 300px; width: 500px; overflow: auto; background-color: #CCCCCC; border: 1px solid #555555; }

in my CSS file then the JS is fired (i added an alert() to my code to check this) but the widths are not changed.

what changes should i make to my codes to make this work so i can have the styles in my CSS file instead of the main HTML file.

edit: just thought you may need this part too so you can see what the call looks like.

resize chat log&nbsp;<img src="resize_d.gif" width="21" height="9" onclick="Div('div_chat','h',20);" alt="height +">&nbsp;
<img src="resize_u.gif" width="21" height="9" onclick="Div('div_chat','h',-20);" alt="height -">&nbsp;&nbsp;
<img src="resize_r.gif" width="21" height="9" onclick="Div('div_chat','w',20);" alt="width +">&nbsp;
<img src="resize_l.gif" width="21" height="9" onclick="Div('div_chat','w',-20);" alt="height -">

further edit: i have just tried the following JS but this time i get the following error...

Webpage error details

Message: Invalid procedure call or argument

on the following line

div.currentStyle["width"] = w + "px";

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum