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:
// 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');
Pernahkah Anda melihatnya? Saya dapat mengakses nilai atribut konten dalam elemen pseudo. 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:
mydiv.classlist.add ('mycssclass'); // menambahkan kelas
myDiv.classlist.remove ('mycssclass'); // Menghapus kelas
mydiv.classlist.toggle ('mycssclass'); // Mengaktifkan kelas
Sebagian besar browser menerapkan API daftar kelas sangat awal, dan akhirnya IE10 juga mengimplementasikannya.
Langsung tambahkan dan hapus aturan gaya ke lembar gaya
Kita semua sangat akrab dengan menggunakan elemen.style.propertyname untuk memodifikasi gaya. Menggunakan JavaScript dapat membantu kami melakukan ini, tetapi apakah Anda tahu cara menambah atau memperbaiki aturan gaya CSS yang ada? Sebenarnya sangat sederhana.
Salinan kode adalah sebagai berikut:
fungsi 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");
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. Tetapi tahukah Anda bahwa lembar gaya CSS juga dapat ditunda pemuatan, dan fungsi panggilan balik akan diberitahu setelah beban berhasil.
Salinan kode adalah sebagai berikut:
keriting(
[
"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
}
});
Script Sintaks PrismJS Sintaksis yang digunakan oleh situs web ini malas memuat. 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 acara CSS Mouse Pointer sangat menarik. Kemanjurannya sangat mirip dengan JavaScript. Saat Anda mengatur atribut ini ke tidak ada, itu dapat secara efektif mencegah elemen dari dinonaktifkan. Anda mungkin mengatakan "Jadi apa?", Tetapi pada kenyataannya, itu melarang acara JavaScript atau fungsi panggilan balik pada elemen ini!
Salinan kode adalah sebagai berikut:
.disabled {pointer-events: tidak ada; }
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.
Di atas adalah 5 cara untuk berinteraksi dengan JavaScript dan CSS oleh saya. Jika Anda memiliki yang lebih baik, tolong beri tahu saya. Artikel ini akan diperbarui terus menerus.