...

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



Mikebert4
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.

HTML:


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


CSS (style.css)


#box {
width: 200px;
}


Javascript (js.js)


function showWidth(){
var box = document.getElementById('box');
alert(box.style.width);
}


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:

HTML:


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


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?


Cheers!
Mike

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"));
}

Mikebert4
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.

needsomehelp
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>

with


#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.



<div>
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 -">
</div>




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