<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
#GFG {
/* This sets CSS property of the div which id is GFG to
be styled dashed and in green color with black background
having certain padding with background-clip to be
border-box by default*/
width: 50%;
height: 400px;
padding: 15px;
background-color: black;
background-clip: border-box;
border: 20px dashed green;
}
</
style
>
</
head
>
<
body
>
<
h1
>Flip background-clip with JavaScript</
h1
>
<
button
onclick
=
"myFunctionC()"
style="width:200px;
height:50px;
background-color: black;
color:white">
Let's Change to content-box
</
button
>
<
br
><
br
>
<
button
onclick
=
"myFunctionP()"
style="width:200px;
height:50px;
background-color: black;
color:white">
Let's Change to padding-box
</
button
>
<
br
><
br
>
<
button
onclick
=
"myFunctionI()"
style="width:200px;
height:50px;
background-color: black;
color:white">
Let's back to initial
</
button
>
<
br
><
br
>
<
div
id
=
"GFG"
>
</
div
>
<
script
>
/* These are the functions which will be triggered when the
corresponding button will be clicked and sets the
CSS background-clip property accordingly */
function myFunctionC() {
document.getElementById(
"GFG").style.backgroundClip = "content-box";
}
function myFunctionP() {
document.getElementById(
"GFG").style.backgroundClip = "padding-box";
}
function myFunctionI() {
document.getElementById(
"GFG").style.backgroundClip = "initial";
}
</
script
>
</
body
>
</
html
>