Penjelasan terperinci tentang kemahiran CSS_javascript operasi dinamik Javascript

1. Cara menggunakan js untuk mengendalikan atribut css

1. Untuk atribut css tanpa sengkang, secara amnya gunakan nama atribut secara langsung.

Seperti: obj.style.margin, obj.style.width, obj.style.left, obj.style.position

2. Untuk atribut CSS yang mengandungi garis bawah, alih keluar setiap garis bawah dan gantikan aksara pertama selepas setiap garis bawah dengan huruf besar.

Seperti: obj.style.marginTop, obj.style.borderLeftWidth, obj.style.zIndex, obj.style.fontFamily, dsb.

3. Kaedah penulisan khas untuk js mengendalikan atribut apungan css

Oleh kerana float ialah perkataan terpelihara JavaScript, kami tidak boleh menggunakan obj.style.float secara langsung, kerana operasi ini tidak sah. Kaedah penggunaan yang betul ialah: IE: obj.style.styleFloat, pelayar lain seperti Mozilla (gecko), ff, dll. gunakan styleFloat: obj.style.cssFloat.

2. Gunakan js untuk mendapatkan nilai atribut css

1. Dapatkan Gaya sebaris: obj.style.

JS mendapat nilai atribut CSS

2. Dapatkan atribut Css di dalam Kelas dan di luar Pautan: IE menggunakan kaedah obj.currentStyle["property name"], manakala FF menggunakan kaedah getComputedStyle

3. Gunakan js untuk menetapkan nilai kepada atribut css

1. Berikan atribut kelas

Tugasan: document.getElementById('ceil').className = "class1";

Jika ia mempunyai berbilang nilai: document.getElementById('ceil').className = "class1 class2 class3";

2. obj.style.cssText menetapkan gaya css objek

document.getElementById('navition').style.cssText = "Kod CSS anda';

Ringkasan

Mengetahui cara mengubah suai gaya yang digunakan pada halaman secara dinamik sangat berguna untuk mencipta halaman web yang bergaya dan interaktif - pengetahuan yang dijelaskan dalam artikel ini membentuk asas untuk teknik yang lebih maju seperti animasi JavaScript yang menjadi asas. Adalah penting untuk ambil perhatian bahawa anda harus menggunakan pengubahsuaian gaya dinamik secara bertanggungjawab dan jangan menggunakannya secara berlebihan. Seperti yang dinyatakan sebelum ini, pengubahsuaian gaya juga boleh meningkatkan kecekapan Web - menunjukkan dan menyembunyikan kandungan boleh membantu mengelakkan interaksi data yang tidak perlu antara pelanggan dan pelayan.