masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > Ringkasan kaedah untuk berinteraksi dengan kemahiran JavaScript dan CSS_javascript

Ringkasan kaedah untuk berinteraksi dengan kemahiran JavaScript dan CSS_javascript

WBOY
Lepaskan： 2016-05-16 16:29:30
asal
1358 orang telah melayarinya

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

Label berkaitan：
css javascript interaksi
sumber：php.cn
Artikel sebelumnya：Data json yang dikembalikan dengan memuat naik fail akan digesa untuk memuat turun kemahiran solution_javascript masalah Artikel seterusnya：Gunakan jQuery untuk mengesahkan format dan saiz images_jquery yang dimuat naik
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Kaedah CSS sahaja untuk mengubah suai imej src secara dinamik pada klik tanpa menggunakan JavaScript Saya perlu menukar src imej pada klik tetikus hanya menggunakan css seperti img:active{}
daripada 2024-04-06 19:25:49
0
1
505
Titik Scatterplot tidak mengekalkan nilai semasa mengezum masuk d3.js Ini adalah kali pertama saya menggunakan d3.js, jadi harap bersabar. Saya melaksanakannya ...
daripada 2024-04-06 18:16:26
0
1
403
Acara tuding JavaScript pada elemen pseudo khusus vendor 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...
daripada 2024-04-06 15:35:24
0
1
274
Hantar borang tanpa butang menggunakan Javascript/Jquery Saya cuba menyerahkan borang tanpa butang dengan memanggil fungsi JavaScript dan melaksana...
daripada 2024-04-06 14:54:03
0
2
421
Sesuaikan penampilan pengepala akordion Bootstrap menggunakan kelas CollapseDisplay Saya ingin menggayakan tajuk kad panel dengan rancangan runtuh kelas. Dalam contoh ini, ia...
daripada 2024-04-06 12:53:11
0
1
376
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan