Solved

Add a Style Attribute to Div using Javascript function

Posted on 2009-05-19
4
7,911 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:
RQuadling 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:RQuadling
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

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!
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

930 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now