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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2002
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How to access CSS properties from JavaScript

    I am working on a program that requires the use of certain CSS properties to be used inside a JavaScript file. I want to access the "background-color" property of div.Item (where Item is the class) inside a function. How do I do that ?
    I tried document.classes.Item.backgroundColor but it throws an error when I open the html page.
    Please help

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    for all IE:
    document.all["IDofDIV"].style.backgroundColor

    for IE5 & up and NS6.X:
    document.getElementById("IDofDIV").style.backgroundColor

  • #3
    New to the CF scene
    Join Date
    Jul 2002
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I want to access the property without any ID. Can I do that ?

    The div.Item is defined in the CSS as follows:
    div.Item
    {
    background-color: #00ff00;
    }

    Can I access this property of div.Item from JavaScript in any way?

  • #4
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Using the DOM2 Style and CSS specs:

    Let's say the rule is contained in the very first stylesheet on the page:

    var rules = document.styleSheets.item(0).cssRules;
    for (var i = 0; i < rules.length; i++) {
    if (rules.item(i).selectorText == 'div.Item') {
    rules.item(i).style.backgroundColor = 'newcolor';
    break;
    }
    }

    That will work in any Gecko-based browser (NS6, NS7, Mozilla, Galeon, Beonex, and K-meleon), and no other browser because Gecko is the only browser to support DOM2 to this extent.

    IE has some proprietary style stuff that I'll look into for you and post back in a bit.

  • #5
    New to the CF scene
    Join Date
    Jul 2002
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer

    Actually jkd, I wanted it for IE only.....it would be great if you can help me out. Thanks.

  • #6
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Why would you *want* something IE-only when you can have it crossbrowser?

    Anyway, after a bit of hunting, this should work crossbrowser:

    var rules = document.styleSheets.item(0);
    rules = rules.cssRules || rules.rules;
    for (var i = 0; i < rules.length; i++) {
    if (rules.item(0).selectorText == 'div.Item') {
    rules.item(i).style.backgroundColor = 'newcolor';
    break;
    }
    }


  •  

    Posting Permissions

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