#1
  1. Über nübe
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Babylon 4
    Posts
    240
    Rep Power
    12

    Get CSS rule by ID?


    Here is one way to get a CSS rule:

    Code:
    document.styleSheets[0].rules.item(0).style.getPropertyValue('width');
    In the above example, I have to know exactly which element of the array contains the class.

    Is there an alternate way to get a CSS rule, just by ID? For example, if I have a DIV ID='bacon', then can I get the CSS rule for that DIV?
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    MD
    Posts
    373
    Rep Power
    12
    It is actually simpilar than you might think...

    Code:
    alert(document.getElementById('bacon').style.width)
    That will make an alert box pop up with the style width of the element with the ID bacon (provided that style has been set).

    The width must be set for that ID it can't just be set for a class which that ID is a part of.

    in otherwords

    ---inside style sheet---
    .myclass { width: 500px; }

    --inside html---
    <DIV id="bacon" class="myclass">


    If this is how you set the width of the DIV the javascript getElementById('bacon').style.width will not return a width.

    You must have either

    --- in javascript somewhere before your request ---
    getElementById('bacon').style.width = "400px"

    or
    --- in style sheet --
    #bacon { width: 400px; }

    Then the code will return the correct width.
  4. #3
  5. Über nübe
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Babylon 4
    Posts
    240
    Rep Power
    12
    OK, I tried your suggestion:

    Code:
    <html>
    <head>
    	<title>test</title>
    	<style type="text/css">
    	#bacon { width:400px; border:1px solid black; }
    	</style>
    </head>
    
    <body>
    <div id="bacon">content here</div>
    
    <script>
    alert(document.getElementById('bacon').style.width);
    </script>
    
    </body>
    </html>

    But I get an empty alert message?
    Last edited by khwang; November 13th, 2003 at 02:43 PM.
    Hello, old friend...
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    MD
    Posts
    373
    Rep Power
    12
    Okay... so I wasn't quite accurate in my description...

    I didn't actully test when you set the style in a style sheet...

    But if you do this it will work...

    Code:
    <html>
    <head>
    	<title>test</title>
    	<SCRIPT language=javascript>
    function setStyle() {
    	document.getElementById('bacon').style.width ="400px"
            document.getElementById('bacon').style.border ="1px solid black"
    }
    	</SCRIPT>
    </head>
    
    <body onLoad=setStyle()>
    <div id="bacon">content here</div>
    
    <script>
    function showAlert(){
      alert(document.getElementById('bacon').style.width);
    }
    </script>
    
    <FORM>
    <INPUT type=button onClick=showAlert() value="Show Width">
    </FORM>
    </body>
    </html>
    It just may not be what you want since I'm sure you would prefere to use a css style sheet rather than use javascript to define the styles.

    Because the style is not set until after the page loads you have to request the alert box after the page loads... hense the form button.
  8. #5
  9. Über nübe
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Babylon 4
    Posts
    240
    Rep Power
    12
    Originally posted by melsana
    ...
    It just may not be what you want since I'm sure you would prefer to use a css style sheet rather than use javascript to define the styles.

    Because the style is not set until after the page loads you have to request the alert box after the page loads... hence the form button.
    Yes, I would prefer to use the CSS to set all styles. Then make some calculations (of height) based on the styles, then set height for another style.
    Hello, old friend...

IMN logo majestic logo threadwatch logo seochat tools logo