1. You are viewing our forum as a guest. For full access please Register. WindowsBBS.com is completely free, paid for by advertisers and donations.

CSS background color changed by JS

Discussion in 'General Internet' started by jalarie, 2005/06/20.

Thread Status:
Not open for further replies.
  1. 2005/06/20
    jalarie

    jalarie Inactive Thread Starter

    Joined:
    2005/04/15
    Messages:
    6
    Likes Received:
    0
    I'm using CSS to set the properties on my "body" tag for background-image, background-color, and the text and links colors. It works well for my entire site except for one page where I wish to be able to change the background color using JavaScript. I killed the CSS background by putting 'style= "background-image:url(); "' in my "body" tag, but the JavaScript to change the background color no longer works when I include the CSS. Help?
     
    jalarie,
    #1
  2. 2005/06/20
    TonyT

    TonyT SuperGeek Staff

    Joined:
    2002/01/18
    Messages:
    9,072
    Likes Received:
    400
    1. are you using a stylesheet? (some_name.css)
    2. or are you using inline css? (css style code on every site page)
    3. show me the javascript here along w/ the exact code from <body>.
     
    TonyT,
    #2


  3. to hide this advert.

  4. 2005/06/21
    jalarie

    jalarie Inactive Thread Starter

    Joined:
    2005/04/15
    Messages:
    6
    Likes Received:
    0
    Originally, the html looked like this:


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
    <html lang= "en-US ">
    <head>
    <title>My Title</title>
    <meta http-equiv= "Content-Type" content= "text/html; charset=ISO-8859-1" />
    <link href= "style1.css" rel= "stylesheet" type= "text/css" />
    </head>
    <body background= "jaa_bgnd.jpg" bgcolor= "#ffffee" text= "black"
    link= "blue" vlink= "#800088" alink= "red ">
    This is page content.
    </body>
    </html>

    and the original CSS like this:


    p {
    text-align: justify
    }

    I wanted to change the html to:


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
    <html lang= "en-US ">
    <head>
    <title>My Title</title>
    <meta http-equiv= "Content-Type" content= "text/html; charset=ISO-8859-1" />
    <link href= "style1.css" rel= "stylesheet" type= "text/css" />
    </head>
    <body>
    This is page content.
    </body>
    </html>

    and the CSS to this:


    body {
    background-image: url(jaa_bgnd.jpg);
    background-color: #ffffcc;
    color: black;
    }
    a:link {color: blue; }
    a:visited {color: #800088; }
    a:hover {color: orange; }
    a:active {color: red; }

    p {
    text-align: justify
    }

    I've finally decided that I need two different "body" references in the CSS file, so I changed all of the html files accordingly and made the CSS file like this:


    body.body1 {
    background-image: url(jaa_bgnd.jpg);
    background-color: #ffffcc;
    color: black;
    }
    body.body2 {
    color: black;
    }
    a:link {color: blue; }
    a:visited {color: #800088; }
    a:hover {color: orange; }
    a:active {color: red; }

    p {
    text-align: justify
    }
     
    jalarie,
    #3
  5. 2005/06/21
    TonyT

    TonyT SuperGeek Staff

    Joined:
    2002/01/18
    Messages:
    9,072
    Likes Received:
    400
    all you need in the css file is this added style:

    body {
    background-image: url(jaa_bgnd.jpg);
    background-color: #ffffcc;
    color: black;
    }

    .body2 {
    color: black;
    }

    and on the page that uses body2 put javascript in the body tag:

    <body onLoad= "this.className='body2' ">

    or can use:

    <body class= "body2 ">

    this.classname= can be use for onMouseOver and other events to change css styles of the element.
     
    TonyT,
    #4
  6. 2005/06/22
    jalarie

    jalarie Inactive Thread Starter

    Joined:
    2005/04/15
    Messages:
    6
    Likes Received:
    0
    Thank you.
     
    jalarie,
    #5
Thread Status:
Not open for further replies.

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Accept Learn More...