How can I set -webkit-mask-box-image through javascript?

Tags: javascript,css,webkit,mask

Problem :

I have a div with id="container' that I want to set a -webkit-mask-box-image for. Currently I have this through css:

#container
{
-webkit-mask-box-image: url('masks/4.png');
width:235px;
height:300px;
}

But I want to set the css through javascript, because the mask should change each hour.

I have tried:

document.getElementById("container").setAttribute("style", "-webkit-mask-box-image: url('masks/"+hour+".png'); width:235px; height:300px;");

But that doesn't work. How do I do it?

---

Solution :

you can set in JQuery by below Line of Code, Here is DEMO

$('#container').css('-webkit-mask-box-image',"url('masks/4.png')")