Ketika browser terus meningkatkan dan meningkatkan, batas antara CSS dan JavaScript menjadi semakin kabur. Awalnya mereka bertanggung jawab untuk fungsi yang sama sekali berbeda, tetapi pada akhirnya, mereka semua milik teknologi front-end web dan mereka perlu bekerja sama dengan satu sama lain. Halaman web kami memiliki file .js dan .css, tetapi ini tidak berarti bahwa CSS dan JS independen dan tidak dapat berinteraksi. Anda mungkin tidak tahu lima cara bekerja bersama dengan JavaScript dan CSS yang ingin Anda bicarakan di bawah ini!
Gunakan JavaScript untuk mendapatkan atribut elemen semu
Semua orang tahu cara mendapatkan nilai gaya CSS melalui atribut gaya elemen, tetapi bisakah itu mendapatkan nilai atribut dari elemen semu? Ya, Anda juga dapat mengakses elemen semu di halaman menggunakan JavaScript.
Salinan kode adalah sebagai berikut:
<span style = "font-size: 18px;"> // Dapatkan nilai warna .Element: Sebelumnya
var color = window.getComputedStyle (
Document.QuerySelector ('. Element'), ': Sebelumnya'
) .getPropertyValue ('Color');
// Dapatkan nilai konten .Element: Sebelumnya
var content = window.getComputedStyle (
Document.QuerySelector ('. Element'), ': Sebelumnya'
) .getPropertyValue ('konten'); </span>
Pernahkah Anda melihatnya? Jika Anda ingin membuat situs web yang dinamis dan apik, ini adalah teknik yang sangat berguna!
API Daftar Kelas
Banyak pustaka alat JavaScript memiliki addClass, removeclass dan toggleClass. Agar kompatibel dengan browser lama, perpustakaan kelas ini menggunakan metode untuk mencari className elemen, menambahkan dan menghapus kelas ini, dan kemudian memperbarui nama class. Bahkan, ada API baru yang menyediakan metode untuk menambah, menghapus, dan membalikkan atribut kelas CSS, yang disebut ClassList:
Salinan kode adalah sebagai berikut:
<span style = "font-size: 18px;"> myDiv.classlist.add ('mycsssclass');
mydiv.classlist.remove ('mycssclass');
myDiv.classlist.toggle ('mycssclass');
Sebagian besar browser menerapkan API daftar kelas sangat awal, dan akhirnya IE10 juga mengimplementasikannya.
Langsung tambahkan dan hapus aturan gaya ke lembar gaya
Kami semua sangat akrab dengan menggunakan elemen.style.propertyname untuk memodifikasi gaya. Sebenarnya sangat sederhana.
Salinan kode adalah sebagai berikut:
<span style = "font-size: 18px;"> function addcssrule (lembar, pemilih, aturan, indeks) {
if (sheet.insertrule) {
sheet.Insertrule (selector + "{" + aturan + "}", index);
}
kalau tidak {
sheet.addrule (pemilih, aturan, indeks);
}
}
// Gunakan itu!
addcssrule (document.stylesheets [0], "header", "float: left");
</span>
Metode ini biasanya digunakan untuk membuat aturan gaya baru, tetapi Anda dapat melakukan ini jika Anda ingin memodifikasi aturan yang ada.
Memuat file CSS
Memuat gambar, json, skrip, dll. Adalah cara yang baik untuk mempercepat tampilan halaman. Kami dapat menggunakan Curl.js dan loader JavaScript lainnya untuk menunda memuat sumber daya eksternal ini.
Salinan kode adalah sebagai berikut:
<span style = "font-size: 18px;"> curl (
[
"namespace/mywidget",
"CSS! Namespace/Resources/mywidget.css"
],
function (mywidget) {
// Anda dapat beroperasi di mywidget
// Tidak ada referensi untuk file CSS ini di sini karena tidak perlu;
// kami hanya perlu dimuat di halaman
}
}); </span>
Ketika semua sumber daya dimuat, fungsi callback akan dipicu, dan saya dapat memuatnya di fungsi callback. Sangat berguna!
Acara Pointer Mouse CSS
Atribut Pointer-Events dari CSS Mouse Pointer sangat menarik , dilarang dari acara JavaScript atau fungsi panggilan balik pada elemen ini!
Salinan kode adalah sebagai berikut:
<span style = "font-size: 18px;">. Disabled {pointer-events: none;} </span>
Klik pada elemen ini dan Anda akan menemukan bahwa tidak ada acara yang akan dipicu oleh pendengar yang Anda tempatkan pada elemen ini. Fitur ajaib, sungguh - Anda tidak perlu memeriksa apakah ada kelas CSS tertentu untuk mencegah suatu peristiwa dipicu.
Ini adalah 5 metode untuk berinteraksi dengan CSS dan JavaScript yang mungkin belum Anda temukan. Apakah Anda memiliki penemuan baru? Bagikan!