I know you can do the following:
element.style.box-shadow ="something";
How would I cover -moz and -webkit extensions?
If I did element.style.-webkit-box-shadow="something" and element.style.-moz-box-shadow="something", would I be covered?
I know you can do the following:
element.style.box-shadow ="something";
How would I cover -moz and -webkit extensions?
If I did element.style.-webkit-box-shadow="something" and element.style.-moz-box-shadow="something", would I be covered?
4 Answers
Reset to default 10The option is called webkitBoxShadow, mozBoxShadow, etc. - to convert a CSS option name to a .style. property remove the leading dash and then convert it from lowercase-with-dashes to lowerCamelCase.
It would be better to set a class that declares those shadow properties for the various browsers and append that class to the className of the target element.
something like:
.shadowed{
/*all shadow declarations for various browsers*/
-o-
-webkit-
-moz-
-ms-
box-shadow
}
element.className += ' shadowed';
element.style['-webkit-box-shadow'] = "something";
Or in Mozilla:
element.style['-moz-box-shadow'] = "something";
you can try out this for text shadow . and for box shadow just replace text with box.
<html>
<body>
<p id="demo">Text shadow.</p>
<button type="button" onclick="myFunction()">Add shadow to text</button>
<script>
function myFunction() {
document.getElementById("demo").style.textShadow="2px 2px 4px green";
}
</script>
</body>