Bagaimana cara memberi gaya dalam javascript?

Ketika berbicara tentang gaya beberapa konten, cara yang paling umum adalah dengan membuat aturan gaya dan membuat pemilihnya menargetkan elemen atau elemen. Aturan gaya akan terlihat sebagai berikut

.batman {
	width: 100px;
	height: 100px;
	background-color: #333;
}

Elemen yang akan terpengaruh oleh aturan gaya ini dapat terlihat seperti ini

Pada halaman web mana pun, kita akan melihat mulai dari beberapa hingga BANYAK aturan gaya, masing-masing dengan indah melangkahi satu sama lain untuk menata semua yang kita lihat. Ini bukan satu-satunya pendekatan yang bisa kita gunakan untuk menata konten menggunakan CSS. Itu bukan HTML jika tidak ada banyak cara untuk menyelesaikan tugas yang sama

Mengabaikan gaya sebaris, pendekatan lain yang dapat kita gunakan untuk memperkenalkan elemen pada kebaikan yaitu gaya CSS melibatkan JavaScript. Kita dapat menggunakan JavaScript untuk secara langsung menetapkan gaya pada suatu elemen, dan kita juga dapat menggunakan JavaScript untuk menambah atau menghapus nilai kelas pada elemen yang akan mengubah aturan gaya mana yang diterapkan

Dalam tutorial ini, kita akan belajar tentang kedua pendekatan ini

Selanjutnya

YA AMPUN. Buku JavaScript oleh Kirupa?

Untuk menendang keterampilan JavaScript Anda ke luar angkasa, semua yang Anda butuhkan untuk menjadi ahli JS tersedia dalam edisi paperback dan digital

Mengapa Kami Mengatur Gaya Menggunakan JavaScript?

Sebelum kita melangkah lebih jauh, mungkin berguna untuk menjelaskan mengapa kita ingin menggunakan JavaScript untuk memengaruhi gaya suatu elemen. Dalam kasus umum saat kami menggunakan aturan gaya atau gaya sebaris untuk memengaruhi tampilan elemen, penataan gaya dimulai saat halaman dimuat. Itu luar biasa, dan mungkin itulah yang paling sering kita inginkan

Ada banyak kasus, terutama karena konten kita menjadi lebih interaktif, di mana kita ingin gaya muncul secara dinamis berdasarkan masukan pengguna, beberapa kode berjalan di latar belakang, dan banyak lagi. Dalam skenario semacam ini, model CSS yang melibatkan aturan gaya atau gaya sebaris tidak akan membantu kita. Sementara pseudoselektor seperti hover memberikan beberapa dukungan, kami masih sangat terbatas dalam hal yang dapat kami lakukan

Solusi yang perlu kita terapkan untuk semuanya adalah solusi yang melibatkan JavaScript. JavaScript tidak hanya memungkinkan kita menata elemen yang berinteraksi dengan kita, yang lebih penting, JavaScript memungkinkan kita untuk menata elemen di seluruh halaman. Kebebasan ini sangat kuat dan melampaui kemampuan terbatas CSS untuk menata konten di dalam (atau sangat dekat dengan) itu sendiri

Kisah Dua Pendekatan Gaya

Seperti yang kita lihat di pendahuluan, kita memiliki dua cara untuk mengubah gaya elemen menggunakan JavaScript. Salah satu caranya adalah dengan menyetel properti CSS langsung pada elemen. Cara lain adalah dengan menambahkan atau menghapus nilai kelas dari suatu elemen yang dapat mengakibatkan aturan gaya tertentu diterapkan atau diabaikan. Mari kita lihat kedua kasus ini secara lebih rinci

Mengatur Gaya Secara Langsung

Setiap elemen HTML yang Anda akses melalui JavaScript memiliki objek gaya. Objek ini memungkinkan Anda menentukan properti CSS dan menetapkan nilainya. Misalnya, seperti inilah pengaturan warna latar belakang elemen HTML yang nilai idnya adalah superman

let myElement = document.querySelector("#superman");
myElement.style.backgroundColor = "#D93600";

Untuk mempengaruhi banyak elemen, Anda dapat melakukan sesuatu sebagai berikut

let myElements = document.querySelectorAll(".bar");

for (let i = 0; i < myElements.length; i++) {
	myElements[i].style.opacity = 0;
}

Singkatnya, untuk menata elemen secara langsung menggunakan JavaScript, langkah pertama adalah mengakses elemen. Metode querySelector kami yang praktis dari sebelumnya cukup membantu di sini. Langkah kedua adalah menemukan properti CSS yang Anda minati dan memberinya nilai. Ingat, banyak nilai dalam CSS sebenarnya adalah string. Ingat juga bahwa banyak nilai memerlukan unit pengukuran seperti px atau em atau sesuatu seperti itu untuk benar-benar dikenali. Ingat juga. sebenarnya, saya lupa

Terakhir, beberapa properti CSS memerlukan nilai yang lebih kompleks untuk diberikan dengan sekumpulan teks acak diikuti dengan nilai yang Anda minati. Salah satu yang lebih populer di bucket ini adalah properti transform. Salah satu pendekatan untuk menyetel nilai yang kompleks adalah dengan menggunakan rangkaian string kuno yang bagus

myElement.style.transform = "translate3d(" + xPos + ", " + yPos + "px, 0)";

Itu bisa sangat menjengkelkan, karena melacak tanda kutip dan sebagainya adalah sesuatu yang membosankan dan rawan kesalahan. Satu solusi yang tidak terlalu menjengkelkan adalah dengan menggunakan sintaks literal string

myElement.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;

Perhatikan bagaimana pendekatan ini memungkinkan Anda untuk tetap memberikan nilai khusus sambil menghindari semua kerumitan penggabungan string. Untuk detail lebih lanjut tentang sintaks literal string, artikel/video Menggabungkan String dan Variabel adalah yang Anda perlukan

Casing Khusus Beberapa Nama Properti CSS

JavaScript sangat pilih-pilih tentang apa yang membentuk nama properti yang valid. Sebagian besar nama dalam CSS akan mendapatkan segel persetujuan JavaScript, jadi Anda bisa menggunakannya langsung dari kartonnya. Ada beberapa hal yang perlu diingat

Untuk menentukan properti CSS dalam JavaScript yang berisi tanda hubung, cukup hapus tanda hubung tersebut. Misalnya, background-color menjadi backgroundColor, properti border-radius berubah menjadi borderRadius, dan seterusnya

Juga, kata-kata tertentu dalam JavaScript dicadangkan dan tidak dapat digunakan secara langsung. Salah satu contoh properti CSS yang termasuk dalam kategori khusus ini adalah float. Di CSS itu adalah properti tata letak. Dalam JavaScript, itu singkatan dari sesuatu yang lain. Untuk menggunakan properti yang namanya sepenuhnya dicadangkan, awali properti dengan css di mana float menjadi cssFloat

Diambil dari kedalaman otak senokuler, ada variasi lain dari pendekatan kami sebelumnya yang dapat kami gunakan untuk mengatur gaya secara langsung. Ini melibatkan penggunaan Object. menetapkan

let color = "red"
let fontSize = "2em"
let fontWeight = "bolder"

Object.assign(myElement.style, {
  color,
  fontSize,
  fontWeight,
});

Untuk elemen DOM kami yang diwakili oleh myElement, properti CSS warna, Ukuran font, dan Berat font diatur dengan satu operasi. Pendekatan seperti ini adalah penghemat waktu yang sangat besar jika kita perlu menyetel banyak properti atau menggunakan kerangka kerja seperti React di mana sejumlah besar CSS-in-JS adalah normanya

Menambah dan Menghapus Kelas Menggunakan

Pendekatan kedua melibatkan penambahan dan penghapusan nilai kelas yang, pada gilirannya, mengubah aturan gaya mana yang diterapkan. Misalnya, katakanlah kita memiliki aturan gaya yang terlihat seperti berikut

.disableMenu {
	display: none;
}

Dalam HTML, kami memiliki menu yang idnya adalah dropDown

	
One
	
Two
	
Three
	
Four
	
Five
	
Six

Sekarang, jika kita ingin menerapkan milik kita. aturan gaya disableMenu ke elemen ini, yang perlu kita lakukan hanyalah menambahkan disableMenu sebagai nilai kelas ke elemen dropDown

	
One
	
Two
	
Three
	
Four
	
Five
	
Six

Salah satu cara untuk melakukannya melibatkan pengaturan properti className elemen, sebuah pendekatan yang kita lihat sebelumnya. Masalah dengan className adalah kita bertanggung jawab untuk mempertahankan daftar nilai kelas yang diterapkan saat ini. Lebih buruk lagi, daftar nilai kelas dikembalikan kepada kita sebagai string. Jika kita memiliki beberapa nilai kelas yang ingin kita tambahkan, hapus, atau hanya aktifkan/nonaktifkan, kita harus melakukan banyak tipuan terkait string rawan kesalahan yang tidak menyenangkan

Untuk membantu meringankan beberapa ketidaknyamanan, kami sekarang memiliki API yang jauh lebih bagus yang membuat penambahan dan penghapusan nilai kelas dari suatu elemen menjadi sangat mudah. API baru ini dikenal sebagai classList, dan menyediakan beberapa metode yang akan membuat bekerja dengan nilai kelas menjadi sangat mudah.

Apa yang dilakukan keempat metode ini mungkin cukup jelas dari namanya, tetapi mari kita lihat lebih detail

Menambahkan Nilai Kelas

Untuk menambahkan nilai kelas ke elemen, dapatkan referensi ke elemen tersebut dan panggil metode add di atasnya melalui classList

Setelah kode ini berjalan, elemen div kita akan memiliki nilai kelas berikut. bar, foo, zorb, baz. API classList memastikan ruang ditambahkan di antara nilai kelas. Jika kami menentukan nilai kelas yang tidak valid, API classList akan mengeluh dan tidak menambahkannya. Jika kita memberi tahu metode add untuk menambahkan kelas yang sudah ada pada elemen, kode kita akan tetap berjalan, tetapi nilai kelas duplikat tidak akan ditambahkan

Menghapus Nilai Kelas

Untuk menghapus nilai kelas, kita dapat memanggil metode hapus di classList

Setelah kode ini dijalankan, nilai kelas foo akan dihapus. Yang tersisa hanyalah bar, baz, dan zorb. Cukup sederhana, bukan?

Mengalihkan Nilai Kelas

Untuk banyak skenario gaya, ada satu alur kerja yang sangat umum. Pertama, kami memeriksa apakah ada nilai kelas pada elemen. Jika nilainya ada, kami menghapusnya dari elemen. Jika nilainya tidak ada, kami menambahkan nilai kelas itu ke elemen. Untuk menyederhanakan pola toggling yang sangat umum ini, classList API memberi Anda metode toggle

Metode toggle, seperti namanya, menambah atau menghapus nilai kelas yang ditentukan pada elemen setiap kali dipanggil. Dalam kasus kita, kelas foo dihapus saat pertama kali metode toggle dipanggil. Kedua kalinya, kelas foo ditambahkan. Ketiga kalinya, kelas foo dihapus. Anda mendapatkan gambarannya

Memeriksa apakah Nilai Kelas Ada

Hal terakhir yang akan kita lihat adalah metode berisi

Metode ini memeriksa untuk melihat apakah nilai kelas yang ditentukan ada pada elemen. Jika nilainya ada, Anda mendapatkan benar. Jika nilainya tidak ada, Anda salah

Kesimpulan

Jadi, begitulah - dua pendekatan berbasis JavaScript yang sangat bagus yang dapat Anda gunakan untuk menata elemen Anda. Dari dua pilihan ini, jika Anda memiliki kemampuan untuk memodifikasi CSS Anda, saya lebih suka Anda menggunakan elemen gaya dengan menambah dan menghapus kelas. Alasan sederhananya adalah bahwa pendekatan ini jauh lebih dapat dipertahankan. Jauh lebih mudah untuk menambah dan menghapus properti gaya dari aturan gaya di CSS dibandingkan dengan menambah dan menghapus baris JavaScript

Bagaimana cara membuat elemen gaya dalam JavaScript?

Bisakah saya menggunakan gaya dalam JavaScript?

Bagaimana cara mendapatkan gaya CSS di JavaScript?

Bagaimana cara memasukkan CSS ke dalam JavaScript?