How do I use javascript to render blue gradient color

Question

I need to display text on a blue gradient color background within a table. How could I render this using Javascript?

Thanks a lot!

score 1 · Accepted Answer · answered Jun 15 '10 at 12:01

1

You can do this with CSS if you know that your visitors browsers support this feature: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

Another link worth visiting is this page that has a CSS generator that allows you to create the style interactively: http://gradients.glrzad.com/

Here's the CSS for a blue gradient:

-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.18, rgb(20,169,250)),
    color-stop(0.67, rgb(43,61,255)),
    color-stop(0.86, rgb(36,54,171))
)
-moz-linear-gradient(
    center bottom,
    rgb(20,169,250) 18%,
    rgb(43,61,255) 67%,
    rgb(36,54,171) 86%
)

answered Jun 15 '10 at 12:01

Bernhard Hofmann

10,321
12
59
78

hello, I have another question. My current code is like this which I apply a static color such as document.getElementById("box1").style.backgroundColor = "#ffff00";. How do I apply this -webkit-gradient() style into this function? function clickedElement(){ document.getElementById("box1").style.backgroundColor = "#ffff00"; } Thanks so much for your help. – dojomedojo Jul 27 '10 at 12:50
To your question, the style should be defined in a CSS class, say "banner", and then you'll be able to add that class to the elements you want by using document.getElementById("box1").className += " banner"; See this question: http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript – Bernhard Hofmann Jul 27 '10 at 13:28

score 0 · Answer 2 · answered Jun 15 '10 at 11:51

0

The best way to do this is by css and background image with gradient. use background css property.

answered Jun 15 '10 at 11:51

dzida

8,854
2
36
57

How do I use javascript to render blue gradient color

2 Answers2