Cara Penulisan CSS di Javascript

Cara Penulisan CSS di Javascript - Untuk melakukan styling terhadap elemen HTML tentu biasanya kita melakukannya dengan CSS, karena memang CSS ditujukan untuk mengatur elemen, mulai dari layout, warna, jarak dan lain sebagainya. Namun, bukan hanya dengan CSS saja kita bisa melakukan itu semua, dengan javascript kita juga bisa mengatur styling elemen HTML.

Nah, pada kesempatan kali ini saya akan membahas bagaimana Cara Penulisan CSS di Javascript, tentu cara penulisan CSS dijavascript akan sangat berbeda penulisannya dengan penulisan CSS sebenarnya. Untuk lebih jelasnya silahkan simak penjelasannya berikut ini.

Untuk menuliskan sintak pada CSS aturan penulisannya seperti berikut.

selector {
    properti: value1;
    properti: value2;
}

Berbeda dengan penulisan CSS pada javascript yang sedikit lebih panjang, dan harus benar - benar diperhatikan elemennya, kalian bisa perhatikan penulisan seperti berikut.

document.getElementById("elemen").style.width = "value"

Supaya lebih jelas, saya akan buat kasus sederhana bagaimana penulisan CSS pada javascript. Silahkan kalian bisa buat file index.html kemduian ketikan sintak HTML dan javascript untuk styling CSSnya beriku ini.

<body>
    <div id="container">
        <h1>DUMETSchool</h1>
        <p>DUMET School adalah tempat Kursus Website, Digital Marketing, dan Desain Grafis yang berlokasi di Jakarta dan Depok.</p>
    </div>
</body>
<script>
    document.getElementById("container").style.width = "500px"
    document.getElementById("container").style.padding = "10px"
    document.getElementById("container").style.fontFamily = "Arial";
    document.getElementById("container").style.backgroundColor = "#ff5252"
    document.getElementsByTagName("h1")[0].style.color = "#2963ff"
    document.getElementsByTagName("p")[0].style.color = "white"
</script>

Tentu dengan penulisan CSS pada javascript akan sedikit banyak dan rumit dibanding menulisakan CSS langsung, namun dengan begitu kita bisa tahu bahwa styling CSS bisa kita buat dijavascript. Baik, cukup sekian pembahasan bagaimana Cara Penulisan CSS di Javascript, semoga pembahasan ini bermanfaat

17 Desember 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat