Cara Membuat CSS dengan Javascript Murni dan Jquery - Hallo sahabat Situs Pendidikan Masa Kini - Patih Akbar, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat CSS dengan Javascript Murni dan Jquery, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel CSS, HTML, Javascript, yang kami tulis ini dapat anda pahami. dengan mudah, selamat membaca.

Judul : Cara Membuat CSS dengan Javascript Murni dan Jquery
link : Cara Membuat CSS dengan Javascript Murni dan Jquery

Cara Membuat CSS dengan Javascript Murni dan Jquery

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.

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.

Demikianlah Artikel Tentang Cara Membuat CSS dengan Javascript Murni dan Jquery

Semoga dengan membaca artikel Cara Membuat CSS dengan Javascript Murni dan Jquery ini, bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel kami yang lainnya. Dan jangan lupa di share yaa

Anda sekarang membaca artikel Cara Membuat CSS dengan Javascript Murni dan Jquery dengan alamat link https://patihakbar.blogspot.com/2019/12/cara-membuat-css-dengan-javascript.html