Ringkasan kaedah untuk berinteraksi dengan kemahiran JavaScript dan CSS_javascript

Gunakan JavaScript untuk mendapatkan atribut unsur pseudo

Semua orang tahu cara mendapatkan nilai gaya CSS sesuatu elemen melalui atribut gayanya, tetapi bolehkah anda mendapatkan nilai atribut unsur pseudo? Ya, anda juga boleh mengakses elemen pseudo dalam halaman menggunakan JavaScript.

Salin kod Kod adalah seperti berikut:

// Dapatkan nilai warna .element:before
var color = window.getComputedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('warna');
// Dapatkan nilai kandungan .element:before
kandungan var = window.getComputedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('kandungan');

Lihat, saya boleh mengakses nilai atribut kandungan dalam elemen pseudo. Ini adalah teknik yang sangat berguna jika anda ingin mencipta laman web yang dinamik dan bergaya!

API classList

Banyak perpustakaan alat JavaScript mempunyai kaedah seperti addClass, removeClass dan toggleClass. Untuk serasi dengan penyemak imbas lama, kaedah yang digunakan oleh perpustakaan kelas ini ialah mencari className elemen, tambah dan padam kelas, kemudian kemas kini className. Malah, terdapat API baharu yang menyediakan kaedah untuk menambah, memadam dan membalikkan atribut kelas CSS, dipanggil classList:

Salin kod Kod adalah seperti berikut:

myDiv.classList.add('myCssClass'); // Menambah kelas
myDiv.classList.remove('myCssClass'); // Mengalih keluar kelas
myDiv.classList.toggle('myCssClass'); // Togol kelas

ClassListAPI telah dilaksanakan dalam kebanyakan penyemak imbas untuk masa yang lama, dan ia akhirnya dilaksanakan dalam IE10.

Tambah dan padamkan peraturan gaya terus pada helaian gaya

Kami semua sangat biasa menggunakan element.style.propertyName untuk mengubah suai gaya Menggunakan JavaScript boleh membantu kami melakukan ini, tetapi adakah anda tahu cara menambah atau mengubah suai peraturan gaya CSS yang sedia ada? Ia sebenarnya sangat mudah.

Salin kod Kod adalah seperti berikut:

fungsi addCSSRule(helaian, pemilih, peraturan, indeks) {
if(sheet.insertRule) {
sheet.insertRule(pemilih "{" peraturan "}", indeks);
}
lain {
sheet.addRule(pemilih, peraturan, indeks);
}
}
// Gunakannya!
addCSSRule(document.styleSheets[0], "header", "float: left");

Kaedah ini biasanya digunakan untuk mencipta peraturan gaya baharu, tetapi jika anda ingin mengubah suai peraturan sedia ada, anda juga boleh berbuat demikian.

Muat fail CSS

Pemuatan malas imej, JSON, skrip, dll. ialah cara yang baik untuk mempercepatkan paparan halaman. Kami boleh menggunakan pemuat JavaScript seperti curl.js untuk memuatkan sumber luaran ini dengan malas Tetapi tahukah anda bahawa helaian gaya CSS juga boleh dimuatkan dengan malas, dan fungsi panggil balik akan memberitahu anda selepas pemuatan berjaya.

Salin kod Kod adalah seperti berikut:

keriting(
[
"ruang nama/MyWidget",
"css!namespace/resources/MyWidget.css"
],
function(MyWidget) {
// Anda boleh mengendalikan MyWidget
// Tiada rujukan kepada fail CSS ini di sini kerana ia tidak diperlukan;
// Kami hanya memerlukannya untuk dimuatkan pada halaman
}
});

Skrip penyerlahan sintaks PrismJS yang digunakan pada tapak web ini malas dimuatkan. Apabila semua sumber dimuatkan, fungsi panggil balik akan menyala dan saya boleh memuatkannya dalam fungsi panggil balik. Sangat berguna!

Acara Penunjuk Tetikus CSS

Properti peristiwa penunjuk CSS sangat menarik, ia berfungsi seperti JavaScript. Apabila anda menetapkan sifat ini kepada tiada, ia boleh menghalang elemen daripada dilumpuhkan secara berkesan, tetapi sebenarnya, ia melumpuhkan sebarang acara JavaScript atau fungsi panggil balik pada elemen ini!

Salin kod Kod adalah seperti berikut:

.dilumpuhkan { pointer-events: none;

Klik pada elemen ini dan anda akan mendapati bahawa mana-mana pendengar yang anda letakkan pada elemen ini tidak akan mencetuskan sebarang peristiwa. Ciri yang hebat, sungguh - anda tidak perlu lagi menyemak sama ada kelas CSS tertentu wujud untuk mengelakkan peristiwa daripada dicetuskan.

Di atas ialah 5 cara untuk berinteraksi dengan JavaScript dan CSS yang telah saya ringkaskan Jika anda mempunyai yang lebih baik, sila maklumkan kepada kami Artikel ini akan terus dikemas kini