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')")

    CSS Howto..

    How to make html lists horizontal in css?

    How to scale an element when it loads using only CSS?

    How to hide href attribute of tag via css when using window.print

    How to set the overall Grid thumbnail height to be equal?

    how to trigger a css animation after certain pixels of scroll

    How to add text underneath the centered image

    How to position the whole site? css positioning problem [closed]

    how to set up responsive columns with pure CSS?

    How can display table-row behave like colspan=3

    How do you use CSS to make a group of images that flow over the edges of the browser window?

    How add symbol in CSS for element?

    How can I centralize a list with css?

    How to use custom CSS with my Sharepoint WebPart?

    How to use Aural CSS?

    how to connect circles with lines without ovelaping

    How to hide specific text from content wihtout calling any CSS?

    How To Create Full Screen Fixed With Scrolling Background Images

    More CSS woes: how to stack divs inside another div, and have them all behave?

    How to position bottom of div above top of its container

    How do i wrap a parent div to the width of a child div (dialog)?

    How to add a centered div that fades-in from the top over my content?

    How to add custom tag to a header to make the font size larger in WordPress? [closed]

    How to make child span collapse with parent

    How to send an HTML file with css?

    How can I add CSS animation to an element on a web page? [closed]

    how to do display none using css

    How to write function in css

    How to reduce font weight in Firefox on Mac with CSS?

    How to start Bootstrap carousel with the first image at each occurrence of a modal window? [closed]

    What is the best tutorial or tutorials on how to make a tooltip using CSS or JQuery or Both? [closed]