CSS dalam Javascript ~ Pemrograman dan Teknologi

Selain menentukan tampilan dengan style CSS saat file HTML baru dibuka dengan browser, kita juga bisa mengubah style dengan menggunakan javascript. Kita bisa menggunakan properti style saat kita sudah mendapatkan elemen HTML menggunakan getElementById atau method dan function lain yang sejenis.

<HTML>
<head>
</head>
<body>
    <h1 id="judul">Paragraf</h1>
    <script>
        var paragrafku=document.getElementById("judul");
        var a=new Array("red", "yellow", "green", "cyan", "blue", "magenta");
        var i=0;
        setInterval(function(){
            if(i>a.length)i=0;
            paragrafku.style.color=a[i];
            i++;
        }, 500);
    </script>
</body>
</HTML>

Dalam script di atas, kita sudah mengubah warna dari tulisan dalam tag H1 yang id-nya "judul". Kita mengubah warnanya dengan mengatur nilai dari properti color yang merupakan salah satu properti yang dimiliki oleh style. Selain color, style memiliki beberapa properti lain yang sama dengan nama properti CSS.

Mendapatkan Elemen HTML Berdasarkan Selectornya
Selain menggunakan getElementById dan method lain yang sudah kita pelajari, kita juga bisa mendapatkan elemen HTML dengan cara lain yang belum saya bahas sebelumnya, yaitu menggunakan querySelector dan querySelectorAll. Kedua method tersebut adalah method yang terdapat dalam object document. Method-method tersebut bisa kita gunakan untuk mendapatkan elemen HTML berdasarkan selectornya.

<HTML>
<head>
    <style>
        .judul{
            color:brown;
        }
    </style>
</head>
<body>
    <h1 class="judul">Judul</h1>
    <h2 class="judul">Judul</h2>
    <script>
        var paragrafku=document.querySelector(".judul");
        var a=new Array("red", "yellow", "green", "cyan", "blue", "magenta");
        var i=0;
        setInterval(function(){
        if(i>a.length)i=0;
            paragrafku.style.background=a[i];
            i++;
        }, 500);
    </script>
</body>
</HTML>

querySelector hanya akan "mengambil" satu elemen HTML yang sesuai selectornya dan pertama kali ditemukan. Jika kalian ingin mengambil lebih dari satu elemen HTML, gunakan querySelectorAll yang akan mengembalikan array berisi semua elemen yang memiliki selector sesuai parameter dari querySelectorAll.

<HTML>
<head>
    <style>
        .judul{
            color:brown;
        }
    </style>
</head>
<body>
    <h1 class="judul">Judul</h1>
    <h2 class="judul">Judul</h2>
    <script>
        var judulku=document.querySelectorAll(".judul");
        judulku[0].style.fontSize="36px";
        judulku[1].style.fontSize="72px";
    </script>
</body>
</HTML>

Semoga kalian paham dengan contoh-contoh di atas. Jika ada yang ingin ditanyakan, silakan tanyakan lewat komentar.