Styling dengan JavaScript (setAttribut / Ganti Attribute CSS)

Untuk mengganti css ketika melakukan beberapa aksi semisal scroll, sebaiknya menggunakan javascript. Berikut format penulisan untuk styling html menggunakan javascript:

document.getElementById(id).style.property=new style

<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>

<h1 id="id1">My Heading 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">Click Me!</button>

var myElement = document.querySelector("#superman");
myElement.style.backgroundColor = "#D93600";
myElement.classList.add("disableMenu");
myElement.classList.remove("disableMenu");
document.getElementById("myBtn").style.width = "300px";

Supaya untuk teraplikasi banyak elemen, lakukan seperti langkah berikut:

var myElements = document.querySelectorAll(".bar");
for (var i = 0; i < myElements.length; i++) {
myElements[i].style.opacity = 0;
}

Contoh lain adalah sbb:

$(".selector").style.backgroundColor = "#1f9815";

$(".selector").css("backgroundColor", "#1f9815");

Inner HTML

$(".selector").html("Total Defisit");

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.