#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2005
    Posts
    65
    Rep Power
    10

    Basic question - How do you change a CSS class using a pre set variable as an id?


    Iím getting a little confused about trying to change a CSS class using document.getElementById.

    I have an working example that uses style.background with a variable attached which works for a table cell, but I donít seem to be able to add the id to document.getElementById (with out the dateid, the class change doesn't know which div to change).

    I need to change the whole CSS class Ė not just the background.
    I can't change id of the div as its dynamically produced a calendar and there will be hundreds of them!

    Whatís the best way to approach this and where am I going wrong?

    PHP Code:
    <script type="text/javascript">
    var 
    dateid document.getElementById(id);
    dateid.document.getElementById('fish').className 'changed'// what Iím trying to do

    // dateid.style.background = "#FFFFFF"; // this used to work using a table layout 

    </script>

    <div id="fish" class="to change "></div> 
    Last edited by dwair; September 18th, 2013 at 08:04 AM.
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    20
    Rep Power
    0
    Originally Posted by dwair
    Iím getting a little confused about trying to change a CSS class using document.getElementById.

    I have an working example that uses style.background with a variable attached which works for a table cell, but I donít seem to be able to add the id to document.getElementById (with out the dateid, the class change doesn't know which div to change).

    I need to change the whole CSS class Ė not just the background.
    I can't change id of the div as its dynamically produced a calendar and there will be hundreds of them!

    Whatís the best way to approach this and where am I going wrong?

    PHP Code:
    <script type="text/javascript">
    var 
    dateid document.getElementById(id);
    dateid.document.getElementById('fish').className 'changed'// what Iím trying to do

    // dateid.style.background = "#FFFFFF"; // this used to work using a table layout 

    </script>

    <div id="fish" class="to change "></div> 
    I have never done this before BUT... this is what I would do without looking:

    I would create a drop down list with (onclick (or onmouseup) set to: "changecss();")
    create a function called changecss(){
    then create an If statement, If list value = X { style=X}....If list value = X { style=X}....If list value = X { style=X}.... (this eg suggests there are 3 css styles)

    btw when I write things like I have done above I hope you understand :P becasue its a mix of English, javascript and random abreviations.

    This should theoretically change the css style to each type when the type is chosen on the list... set the default value on the list to your prefered css.
    You may want to arrange the script tags / style tags in the correct place.

    /*If you are still stuck I can have a look later on when I get back from work.... I am on here primarily to search / ask for a solution to my big problem involving grabing data with an API key, getting the data, reformatting the data, and displaying the data when a certain value is passed :S*/

    Hope you find a solution! Good luck

IMN logo majestic logo threadwatch logo seochat tools logo