Membuat atau menulis kode css biasanya dituliskan lagsung dalam sebuah html yang berada di antara tag pembuka <style> dan tag 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.

Cara Membuat CSS dengan Kode Javascript Murni dan Jquery


Aturan penulisan untuk membuat sebuah "TAG" biasanya memanfaatkan DOM HTML. Dalam sebuah javascript, kita dapat membuat sebuah tag html dengan menggunakan javascript murni dan menggunakan framework javascript yaitu JQUERY. Ada beberapa cara yang bisa kita gunakan. Berikut ini penjelasannya :

 Cara Membuat CSS dengan Kode Javascript Murni

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

document.createElement('style');

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

Lalu, kita perlu memberi nama variabel untuk kode javascript tadi. Pemberian nama variabel 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:

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

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

nametag.innerHTML = `kode css`;

innerHTML adalah kode javascript untuk mejalankan fungsi membuat sebuah kode (dalam hal ini kode CSS) di dalam sebuah tag "style". Kode CSS dapat kita tulis di dalam dua tanda petik tunggal (`).

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 :


var 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 tag <head>. Kode tersebut adalah sebagai berikut :


document.head.appendChild(nametag);

document.head.appendChild adalah sebuah fungsi yang akan membuat sebuah dom CSS html di dalam tag <head>. Karena kode tag <style> berada di dalam tag <head> bukan tag <body>. appendChild adalah perintah untuk membuat sebuah kode setelah element head. Oleh karena itu ditulis document.head.appendChild bukan document.body.appendChild.

Kode Javascript secara keseluruhan dapat kita tulis sebagai berikut :


var 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. Jangan lupa untuk memberi tag pembuka <script> dan 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 framework javascript. Saya mengatakan demikian agar kita tau fungsi dan cara kerja dari jquery itu sendiri. "hmm.Malah curhat...hahaha"

Baik kita lanjutkan.
Untuk membuat CSS menggunakan Jquery, kita harus memanggilnya terlebih dahulu dengan menggunakan tag html dasar 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 tag "<script>" terdapat kode "src" yang merupakan singkatan dari "search". Ini berfungsi untuk memanggil framework javascript (dalam hal ini jquery) di dalam tag html. Sebenarnya jquery ini adalah sekumpulan kode javascript murni yang di buat untuk mejalankan salah satu perintah. 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 tag "style" sekaligus membuat kode CSS. 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 framework javascript jquery. Oleh sebab itu, jika kamu ingin mempelajari framework javascript, lebih baik pahami dulu javascript murni (pure javascript) terlebih dahulu.

Contoh Penerapan Di Dalam HTML

Jika kamu tidak paham bagaimana cara meng-aplikasikan kode javascript tadi di dalam HTML, kamu bisa membaca penjelasan 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>
var 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 bisa berkomentar di bawah.

Terimakasih sudah berkunjung.

Post a Comment

Lebih baru Lebih lama

Baca Artikel Lainnya