The HTML DOM style padding property returns and modify the padding of an element in an HTML document.SyntaxFollowing is the syntax −Returning paddingobject.style.paddingModifying paddingobject.style.padding = “valueExampleLet us see an example of HTML DOM style padding property − Live Demo    body {       color: #000;       background: lightblue;       height: 100vh;    }    p {       border: 2px solid #fff;    }    .btn {       background: #db133a;       border: none;       height: 2rem;       border-radius: 2px;       width: ... Read More

The DOM style opacity property returns and modify the value of opacity CSS property of an element in an HTML document.SyntaxFollowing is the syntax −1. Returning opacityobject.style.opacityModifying opacityobject.style.opacity = “value”ExampleLet us see an example of style opacity property − Live Demo    body {       color: #000;       background: lightblue;       height: 100vh;    }    p {       background: #1f13db;       height: 50px;       width: 100%;    }    .btn {       background: #db133a;       border: none;       height: ... Read More

The HTML DOM style marginRight property returns and modify the right margin of an element in an HTML document.SyntaxFollowing is the syntax −Returning marginRightobject.style.marginRightModifying marginRightobject.style.marginRight = “value”ExampleLet us see an example of style marginRight property − Live Demo    body {       color: #000;       background: lightblue;    height: 100vh;    }    p {       border: 2px solid #fff;    }    .btn {       background: #db133a;       border: none;       height: 2rem;       border-radius: 2px;       width: 40%;     ... Read More

The HTML DOM style marginLeft property returns and modify the left margin of an element in an HTML document.SyntaxFollowing is the syntax −Returning marginLeftobject.style.marginLeftModifying marginLeftobject.style.marginLeft = “value”ExampleLet us see an example of style marginLeft property − Live Demo    body {       color: #000;       background: lightblue;       height: 100vh;    }    p {       border: 2px solid #fff;    }    .btn {       background: #db133a;       border: none;       height: 2rem;       border-radius: 2px;       width: 40%; ... Read More

The DOM style marginTop property returns and modify the top margin of an element in an HTML document.SyntaxFollowing is the syntax −Returning marginTopobject.style.marginTopModifying marginTopobject.style.marginTop = “value”ExampleLet us see an example of style marginTop property − Live Demo    body {       color: #000;       background: lightblue;       height: 100vh;    }    p {       border: 2px solid #fff;    }    .btn {       background: #db133a;       border: none;       height: 2rem;       border-radius: 2px;       width: 40%;   ... Read More

The DOM style marginBottom property returns and modify the bottom margin of an element in an HTML document.SyntaxFollowing is the syntax −Returning marginBottomobject.style.marginBottomModifying marginBottomobject.style.marginBottom = “value”ExampleLet us see an example of style marginBottom property − Live Demo    body {       color: #000;       background: lightblue;       height: 100vh;    }    p {       border: 2px solid #fff;    }    .btn {       background: #db133a;       border: none;       height: 2rem;       border-radius: 2px;       width: 40%;   ... Read More

The DOM PageTransitionEvent is an event which occurs when a user navigates between the webpages.Property of PageTransitionEvent objectPropertyExplanationpersistedIt returns true or false value depending upon whether the webpage was cached or not.Types of events belong to PageTransitionEvent objectEventsExplanationpageHideIt happens when the user navigates away from a webpage.pageShowIt happens when the user navigates to a webpage.ExampleLet us see an example of PageTransitionEvent object − Live Demo    body{       text-align:center;       color:#fff;       background: #ff7f5094;       height:100%;    }    .btn{       background:#0197F6;       border:none;     ... Read More

The DOM style margin property returns and modify the margin of an element in an HTML document.SyntaxFollowing is the syntax −Returning marginobject.style.marginModifying marginobject.style.margin = “value”ExampleLet us see an example of style margin property − Live Demo    body {       color: #000;       background: lightblue;       height: 100vh;    }    p {       border: 2px solid #fff;    }    .btn {       background: #db133a;       border: none;       height: 2rem;       border-radius: 2px;       width: 40%;     ... Read More

The HTML DOM scrollTop property returns and modify the value of the element’s content scrolled vertically in pixels in an HTML document.SyntaxFollowing is the syntax −Returning scrollTopelement.scrollTopAdding scrollTopelement.scrollTop = valueHere value is in pixelsExampleLet us see an example of scrollTop property − Live Demo    body{       text-align:center;       color:#fff;       background: #ff7f5094;       height:100%;    }    p{       font-weight:700;       font-size:1.8rem;       height:80px;       overflow:auto;       width:150px;       margin:20px auto;    }    .btn{     ... Read More

The DOM scrollLeft property returns and modify the value of the element’s content scrolled horizontally in pixels in an HTML document.SyntaxFollowing is the syntax −Returning scrollLeftelement.scrollLeftAdding scrollLeftelement.scrollLeft = valueHere value is in pixelsExampleLet us see an example of scrollLeft property − Live Demo    body{       text-align:center;       color:#fff;       background: #ff7f5094;       height:100%;    }    p{       font-weight:700;       font-size:1.8rem;       height:80px;       overflow:auto;       width:150px;       margin:20px auto;    }    .btn{       ... Read More