www.webdeveloper.com
Results 1 to 3 of 3

Thread: Access webkit gradient from javascript

  1. #1
    Join Date
    Apr 2011
    Posts
    2

    Access webkit gradient from javascript

    Hi,
    I have DIV section with a CSS class that defines a gradient. However, when the user clicks a button, I want to dynamically change the two colors of gradient via Javascript. What is the DOM structure to change the colors in this field similar to this command:
    document.getElementById('content1').style.color = p_color;


    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.32, rgb(20,1,9)),
    color-stop(0.66, rgb(36,41,171))

    Thanks
    Binu
    www.verseview.info

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    Make it easy on yourself, when the target has been clicked, add a classname to the element and just put the gradient you want in a separate class name in your css.

    Alternatively, if you only want to apply it onclick, don't forget the :active pseudo-class.

    Remember Perl? TMTOWTDI
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  3. #3
    Join Date
    Apr 2011
    Posts
    2
    Thank you for the response. I almost got trying to reassign the class. However, the following code worked too.

    document.getElementById('p_body').style.backgroundImage = "-webkit-gradient(linear, 40% 0%, 0% 62%, from(#150C66), to(#0D6622), color-stop(.3,#053331))";

    I have variables to assign the color of my choice.

    Binu

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles