CODEWITHSUNDEEP
javascripthtmlcsswebkitgradient
David Hariri
David Hariri

Reputation: 194

Modify background: webkit-gradient with javascript

This should be fairly simple. All I need to do is pass a new block of parameters to my body css tag webkit gradient with a javascript function that gets called from a link. Here's what I tried (among 200 other things):

CSS

body
{
    -webkit-text-size-adjust:100%;
    font-size:100%;
    color:#444;
    position:relative;
    background: -webkit-linear-gradient(top, #154d9e, #b8d8e4);
}

Javascript

<script>
function changeBack()
{
    document.getElementsByTagName("body").style.background="-webkit-linear-gradient(top, #fff, #000)";
    document.body.style.background="-webkit-linear-gradient(top, #fff, #000)";
}
</script>

Neither of those two lines work. What gives?

Upvotes: 2

Views: 6960

Answers (2)

D&#39;Artagnan
D&#39;Artagnan

Reputation: 21

I had the same problem and I success with use linear-Gradient unless -webkit. You can replace rgb colors by Hexadecimal format (ex. #F767676).

 document.body.style.background = "linear-gradient(90deg, rgb(0, 255, 0), rgb(0, 0, 255))";

Here is a working fiddle example.

https://jsfiddle.net/cdgpts9n/

Upvotes: 1

Jochem261
Jochem261

Reputation: 217

This doesn't work because document.getElementsByTagName("body") returns an array of elements. You need to specify which element it is. There is only one body tag on a page so this should work:

document.getElementsByTagName("body")[0].style.background="-webkit-linear-gradient(top, #fff, #000)";

Upvotes: 3

Related Questions