Setting a CSS gradient in javascript?

Question

so I've been trying to set a gradient with javascript so that it has a mouse over effect, but I've had no luck and cannot get it to work, here is my javascript.

function mouseOVER(x)
{
x.backgroundImage="-webkit-gradient(linear, left bottom, left top, color-stop(0, #F7F7F7), color-stop(1, #FFFFFF));";
}

function mouseOFF(x)
{
x.backgroundImage="-webkit-gradient(linear, left bottom, left top, color-stop(0, #F7F7F7), color-stop(1, #BABABA));";

}​

I've been using jsFiddle to test things, so here is mine for this.

Answer 1

Try somethink like this, with CSS only

CSS

#home{
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #F7F7F7), color-stop(1, #BABABA));
    width:100px;
    height:45px;
    text-align:center;
    border-radius:10px;
    position:relative;
    top:15px;
    left:15px;
}
#home:hover{
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #F7F7F7), color-stop(1, #FFFFFF));
}
#homenav{
    font-family:Arial, Helvetica, sans-serif;
    text-decoration: none;
    color:#000000;
    position:relative;
    top:12.5px;
}

DEMO http://jsfiddle.net/enve/ZauwA/11/

---

To change your text on mouseover use this code

HTML

<nav>
    <div id="home">
    <a href="home.html" id="homenav" onmouseover="changeText()" onmouseout="returnText()">HOME</a>
    </div>
</nav>​

<script>
function changeText()
{
document.getElementById("homenav").innerHTML='Welcome'
}
function returnText()
{
document.getElementById("homenav").innerHTML='Home'
}
</script>

FULL DEMO http://jsfiddle.net/enve/ZauwA/19/

Answer 2

With jQuery this works:

$('#block').css({
    background: "-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000))" 
});

You also need to apply the styles for other non-webkit browsers.

Dont know why youre Fiddle doesnt work. The Console tells me that youre functions are not defined.

Why are you trying to do this? If not necessary i would definteley suggest the CSS-way mentioned above.

Answer 3

No need to use jQuery, vanilla JS is fine. You're simply missing a correct style property reference:

x.backgroundImage='...'; //no such property
x.style.backgroundImage='...'; //works correctly

Working sample (requires a webkit browser obviously)

That being said, you should really use pure CSS and rely on :hover dynamic pseudo-class :

#home {/*gradient 1*/}
#home:hover {/*gradient 2*/}

Answer 4

Would you be open for a pure CSS solution?

if so, add this:

#homenav:hover{
    -webkit-gradient(linear, left bottom, left top, color-stop(0, #F7F7F7), color-stop(1, #FFFFFF));
}

​