xxxxxxxxxx
const div1 = document.getElementById("div1");
// one style css
div1.style.color = "red";
// several style css
div1.style.cssText = `
width: 500px;
height: 500px;
background: red;
`;
xxxxxxxxxx
// Set a SINGLE CSS property:
// css("propertyname");
$("p").css("background-color");
// Set MULTIPLE CSS Properties
$("p").css({"background-color": "yellow", "font-size": "200%"});
xxxxxxxxxx
div.style.color = 'blue';
// adds the indicated style rule
div.style.cssText = 'color: blue; background: white';
// adds several style rules
div.setAttribute('style', 'color: blue; background: white');
// adds several style rules
xxxxxxxxxx
var element = document.createElement('select');
element.style.maxWidth = "100px";
xxxxxxxxxx
<script>
function myFunction() {
document.body.style.backgroundColor = "red";
}
</script>
xxxxxxxxxx
//on HTML *Purist Style* || *Only JavaScript*
<style> //
.example { // para.style.color = 'white';
color: white; // para.style.background = 'black';
background-color: black; // para.style.padding = '10px';
padding: 10px; // para.style.width = '250px';
width: 250px; // para.style.textAlign = 'center';
text-align: center;
}
</style>
// on JavaScript
Element.setAttribute('class', 'highlight');
xxxxxxxxxx
<html>
<head>
<style>
.popup .popuptext {
visibility: hidden;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
</style>
</head>
<body style="text-align:center">
<div class="popup" onclick="myFunction()" ><button>Preview</button>
<video class="popuptext" id="myPopup" style="width:800px;" >
<source src="dolby-atmos-intro.mp4" type="video/mp4">
</video>
</div>
<script>
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
if (popup.paused){
popup.play();
}
else{
popup.pause();
}
}
</script>
</body>
</html>
Run code snippet