Beginners question about changing background colors

Page 1 of 1

2 Replies - 1068 Views - Last Post: 23 January 2012 - 11:35 PM

#1 jmotyljr   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 08-December 11

Beginners question about changing background colors

Posted 23 January 2012 - 10:47 PM

Hello, i have been attempting in teaching myself some jquery within the past day or so because im tired of only playing with just css. I am finding the fundamentals eBook quite informative its very long, so until than i would like to see if anyone can assist or reference me with my question.

Basically i want to change my pages background every 15 seconds. I know how to use javascript to link stylesheets by the clients time but my time spacing would be insane for stylesheets.

Horrible attempt at Pseudo code:
$(document).ready(function() {
    // Variable that generates a random number such as rgb(1-255,1-255,1-255)
    var randomColor = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
    // here is where i dont know, how would i target my css to use the new attributes,
    // and how would i time, i guess i could name this function and fire it on a counter?


thanks for any assistance, off to read a really REALLY long eBook...

Is This A Good Question/Topic? 0
  • +

Replies To: Beginners question about changing background colors

#2 Atli   User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4241
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: Beginners question about changing background colors

Posted 23 January 2012 - 11:30 PM

Hey.

Javascript doesn't target CSS styles, and like you say, it's impractical to keep swapping stylesheets for little things like changing background colors. What you want to do in Javascript is target elements on the page.

In order to change the color of the <body> elmement (effectively changing the background color for the whole page) you would do this:
// Plain Javascript
document.body.style.backgroundColor = "#F00";

// jQuery
$("body").css("background-color", "#F00");


You can also target elements by looking for them in the DOM. For instance, this would set the background color for an element with the ID "my_element".
// Plain Javascript
var my_elem = document.getElementById("my_element");
my_elem.style.backgroundColor = "#F00";

// jQuery
$("#my_element").css("background-color", "#F00");


Another good example is changing every element of the same type:
// Plain Javascript
var elems = document.getElementsByTagName("span");
for (var i = 0; i < elems.length; ++i) {
    elems[i].style.backgroundColor = "#F00";
    elems[i].style.color = "#FFF";
}

// jQuery
$("span")
    .css("background-color", "#F00")
    .css("color", "#FFF");

This is when jQuery really starts coming in handy, in cases where you start having to use loops to go through collections of elements in plain Javascript. It also allows you to use CSS selectors to simplify traversing the DOM. (Kind of like styling elements in CSS stylesheets.)

$("div#container > p:first-child span.error")
    .css("background-color", "#F00")
    .css("color", "#FFF");

That type of styling would take some effort to do in plain Javascript, but jQuery allows it to happen in a single line.

It may be a good idea to look through the Selectors in the jQuery API. It lists what type of CSS-like selectors jQuery is capable of using.
Was This Post Helpful? 2
  • +
  • -

#3 jmotyljr   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 08-December 11

Re: Beginners question about changing background colors

Posted 23 January 2012 - 11:35 PM

Wow, i see how simplified jquery has become. your example are pretty spot on to what i am going to attempt. Thank you for the reference link as well, i am going to check that out.

And for targeting the elements, you were right on with the body tag.. This reply is very informative and straight forward, i appreciate it very much.

Thanks..
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1