Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2008
    Location
    Peterborough - UK
    Posts
    63
    Thanks
    4
    Thanked 9 Times in 9 Posts

    Explain something to me... (external CSS and js fun)

    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:
    Code:
    <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)
    Code:
    #box {
     width: 200px;
    }
    Javascript (js.js)
    Code:
    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:
    Code:
    <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

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,444
    Thanks
    11
    Thanked 598 Times in 578 Posts
    Code:
    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"));
    }
    Last edited by rnd me; 05-29-2009 at 11:00 AM.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • Users who have thanked rnd me for this post:

    Mikebert4 (05-29-2009)

  • #3
    New Coder
    Join Date
    Jul 2008
    Location
    Peterborough - UK
    Posts
    63
    Thanks
    4
    Thanked 9 Times in 9 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Oct 2009
    Posts
    477
    Thanks
    7
    Thanked 3 Times in 3 Posts
    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.

    Code:
    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;
    						}
    Code:
    <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
    Code:
    <div id="div_chat"></div>
    with
    Code:
    #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.

    Code:
    <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

    Code:
    div.currentStyle["width"] = w + "px";
    Last edited by needsomehelp; 03-27-2010 at 11:15 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •