Solved

Add a Style Attribute to Div using Javascript function

Posted on 2009-05-19
4
7,918 Views
Last Modified: 2012-05-07
Hi All,

I have a DIV  container and I would like to be able to add ...style="background:#color"... through a javascript function of which the background colour is passed in as a argument..

function OpenDialog(strColour)
{
 Apply background style to MyDivId.
}

Many thanks,

Rit
0
Comment
Question by:rito1
  • 2
4 Comments
 
LVL 40

Accepted Solution

by:
Richard Quadling earned 250 total points
ID: 24426484
Are you using a JS library? I use Prototype (http://prototypejs.org).

Using prototype, I would do ...

$('MyDivId').style.backgroundColor=strColor;

NOTE: strColor needs to be look like #aabbcc where aa, bb, cc are the hex values for the RGB colours.


0
 
LVL 19

Assisted Solution

by:Albert Van Halen
Albert Van Halen earned 250 total points
ID: 24426696
No need for libraries. Although it makes life much easier (my personal fav is jquery)
document.getElementById(myDivId).style.backgroundColor = strColor; // strColor being #rrggbb like RQuadling said (#ff0000 for red) or a named color like : red
 
via jQuery:
$("#" + myDivId).css("backgroundColor", strColor); 

Open in new window

0
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 24426752
Albert is right about the libs. But I just find them so useful for consistency and provide some support for features lacking on older browsers.
0
 
LVL 1

Author Closing Comment

by:rito1
ID: 31583232
Thanks both. Much appreciated.

Rit
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

713 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question