CODEWITHSUNDEEP
javascriptcsswebkitmask
user3923452
user3923452

Reputation: 13

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

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?

Upvotes: 1

Views: 4082

Answers (2)

doniyor
doniyor

Reputation: 37896

what about

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

Upvotes: 0

Ashish Balchandani
Ashish Balchandani

Reputation: 1266

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

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

Upvotes: 1

Related Questions