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
BELI DI AMAZONMengapa 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
_0Setelah 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
_1Setelah 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
_2Metode 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
_3Metode 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