Cara Membuat CSS dengan Javascript Murni dan Jquery

Oktober 20, 2021

Membuat atau menulis kode css biasanya dituliskan lagsung dalam sebuah html yang berada di antara element pembuka <style> dan element penutup </style>. Bagaimana jika sebuah kode CSS kita tulis dalam bentuk kode javascript ?. Nah, kali ini saya akan membahas cara menulis kode CSS dalam bentuk kode javascript.

Aturan penulisan untuk membuat sebuah "TAG ELEMENT" biasanya ditulis langsung di dalam halaman HTML, lebih tepatnya di dalam area element "<style>". Dalam sebuah javascript, kita dapat membuat sebuah element tag html dengan menggunakan javascript murni dan juga bisa menggunakan library javascript yaitu JQUERY. Ada beberapa cara yang bisa kita gunakan. Berikut ini penjelasannya :

Cara Membuat CSS dengan Kode Javascript Murni

Kita dapat menggunakan javascript murni untuk membuat atau menulis kode Css di html. Salah satu kode javascript dasar untuk membuat ELEMENT STYLE DOM HTML yaitu menggunakan kode berikut :

document.createElement('style');

Kode javascript di atas adalah komponen utama untuk membuat sebuah element tag di html (dalam hal ini adalah tag style). document.createElement(''); adalah sebuah fungsi atau perintah javascript untuk membuat sebuah element dom (element html). Nama element tag berada di dalam tanda kurung yang di apit oleh tanda petik. Nama element tag ini bisa kita ubah menjadi nama element tag html lainnya. Karena dalam hal ini kita ingin membuat sebuah CSS, Maka nama element tag untuk membuat sebuah kode CSS adalah tag "style".

Lalu, kita perlu membuat variabel untuk kode javascript tadi. Pemberian variabel ini berfungsi agar kita tidak membuat kode secara berulang dan juga untuk menghasilkan kode yang lebih ringkas. Kita bisa menuliskan nama variabel sesuai keinginan kita. Disini saya akan memberi nama variabel "nametag" seperti berikut:

let nametag =  document.createElement('style');

Selanjutnya, kita akan mengisi sebuah element tag "style" dengan kode CSS. Maka, kita perlu menggunakan kode javascript berikut :

nametag.innerHTML = `kode css`;

innerHTML adalah kode javascript untuk menulis isi dari element tag sebuah kode (dalam hal ini kode CSS) di dalam sebuah element tag "style". Kode CSS dapat kita tulis di dalam dua tanda petik backtick (`).

Disini saya akan mengisi dengan sebuah kode CSS seperti berikut :

nametag.innerHTML = `h1 { background: red; }`;

Terlihat pada kode di atas, saya ingin membuat sebuah CSS h1 dimana properti background saya beri warna merah. Sehingga jika kita keseluruhan kode menjadi :

let nametag = document.createElement('style');
nametag.innerHTML =`h1 { background: red; }`;

Untuk melengkapi kode di atas, kita memerlukan satu fungsi javascript yang akan memerintahkan kode di atas untuk di tulis pada di dalam element tag <head>. Kode tersebut adalah sebagai berikut :

document.head.appendChild(nametag);

document.head.appendChild adalah sebuah fungsi yang akan menginject sebuah dom CSS html di dalam element tag (dalam hal ini element tag <head> ).

Kode Javascript secarakeseluruhan dapat kita tulis sebagai berikut :

let nametag =  document.createElement('style');
nametag.innerHTML =`h1 { background: red; }`;
document.head.appendChild(nametag);

Kode di atas adalah sebuah script lengkap yang akan membuat sebuah CSS di dalam html menggunakan javascript murni. Jangan lupa untuk memberi element tag pembuka <script> dan element tag penutup </script> agar kode script di atas berjalan.

Diatas adalah prinsip kerja dan cara penulisan menggunakan kode javascript murni atau orang programer sering menyebutnya dengan Pure Javascript.

Bagaimana jika kita ingin membuatnya dalam framework javascript seperti jquery ?. Baik, silahkan simak penjelasan berikut.

Cara Membuat CSS dengan Jquery

Penggunaan jquery sebenarnya untuk mempermudah kita dalam penulisan kode javascript. Hanya saja jika kita bergantung pada jquery maka itu akan membuat seolah olah kita tidak tau konsep dasar dari kode javascript, Istilahnya kita memakai kalkulator untuk menghitung matematika dasar wkwkk. Tapi tenang, jika kamu sudah memahami konsep dasar javascript murni, maka kamu bisa menggunakan library javascript ini.

Untuk membuat CSS menggunakan Jquery, kita harus meload libarry tersebut terlebih dahulu ke dalam halaman HTML dengan menggunakan element tag html seperti berikut :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Kamu bisa meletakkan kode di atas di bagian tag <body> letak disini </body>. Mungkin kamu tidak asing dengan kode "src" di atas. Bagi yang belum megerti, saya akan terangkan sedikit. Didalam element tag "<script>" terdapat kode "src" yang merupakan singkatan dari "search". Kode "src" ini disebut dengan "Attrubute Element". Ini berfungsi untuk meload library javascript (dalam hal ini jquery) di dalam halaman html. Sebenarnya jquery ini adalah sekumpulan kode javascript murni yang di buat untuk mejalankan perintah javascript. Perintah memiliki banyak variasi. Salah satunya yaitu merubah DOM html, dan lain lain.

Selanjutnya, kita akan memanggil sebuah perintah dari kode jquery yang akan membuat element tag "style" sekaligus mengisi kode CSS tersebut. Kode perintah yang bisa kita gunakan adalah sebagai berikut :

$('<style>').text("h1{background:red;}").appendTo(document.head);

Terlihat lebih ringkas bukan ?. Yah, itulah knapa diciptakannya library javascript jquery. Oleh sebab itu, jika kamu ingin mempelajari library javascript, lebih baik pahami dulu javascript murni (pure javascript).

Contoh Penerapan Di Dalam HTML

Jika kamu tidak paham bagaimana cara meng-aplikasikan kode javascript tadi di dalam HTML, kamu bisa melihat contoh berikut:

Contoh Penerapan Membuat CSS Menggunakan Kode Javascript Murni Di Dalam Html

<html>
<head>
</head>
<body>
<h1>
Cara Membuat CSS dengan Kode Javascript Murni</h1>
<script>
let nametag =  document.createElement('style');
nametag.innerHTML =
  `h1 { background: red; }`;
document.head.appendChild(nametag); 
</script> 
</body>
</html>

Contoh Penerapan Membuat CSS Menggunakan JQUERY Di Dalam Html

<html>
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>
<h1> Cara Membuat CSS dengan
Kode JQUERY</h1>
<script>
$('<style>').text("h1{background:red;}").appendTo(document.head); 
</script> 
</body>

</html>

Mungkin itu saja yang bisa saya bagikan untuk kali ini. Jika kamu memiliki kendalan dalam penggunaan kode di atas, kamu bisa komentar di bawah.Terimakasih sudah berkunjung.

Mas Koding