Ringkasan kaedah untuk menukar gaya CSS dalam kemahiran JavaScript_javascript

JavaScript membolehkan anda menukar gaya CSS dengan pantas, supaya anda boleh menarik perhatian pengguna ke tempat yang anda mahu mereka fokus dan memberikan pengalaman interaktif yang lebih baik.

Terdapat 4 cara untuk mengubah suai CSS menggunakan JavaScript:

Ubah suai gaya nod (gaya sebaris); Tukar kelas atau id nod; Tulis css baharu; Gantikan lembaran gaya dalam halaman.

Saya secara peribadi tidak mengesyorkan menggunakan dua kaedah terakhir Hampir semua fungsi boleh dicapai melalui dua kaedah pertama, dan kodnya lebih jelas dan mudah difahami.

Saya juga akan bercakap tentang cara mendapatkan gaya sebenar elemen dan langkah berjaga-jaga dalam bentuk kemudian.

1. Ubah suai gaya nod (gaya sebaris)

Kaedah ini mempunyai berat tertinggi Ia ditulis secara langsung pada atribut gaya nod Ia akan mengatasi gaya yang ditetapkan oleh kaedah lain. Cara penggunaan sangat mudah:

Tetapi perlu diingatkan bahawa beberapa nama gaya CSS terdiri daripada beberapa perkataan, seperti saiz fon, imej latar belakang, dll. Semuanya disambungkan dengan sempang (- Walau bagaimanapun, dalam JavaScript, sempang bermaksud "tolak " , dan oleh itu tidak boleh digunakan sebagai nama atribut. Kita perlu menggunakan "camelCase" untuk menulis nama atribut, seperti fontSize, backgroundImage.

var element = document.getElementById("test");
element.style.display = "none" //让元素隐藏

Juga ambil perhatian bahawa banyak gaya mempunyai unit dan tidak boleh diberikan hanya nombor. Contohnya, unit Saiz fon termasuk px, em, % (peratusan), dsb.

Kaedah ini melanggar prinsip pemisahan prestasi dan tingkah laku Ia secara amnya hanya sesuai untuk menentukan gaya masa nyata (berkaitan dengan tingkah laku) elemen yang kerap berubah Contohnya, div yang boleh digunakan untuk menyeret akan berubah atas dan kiri apabila ia diseret. Atribut sentiasa berubah Pada masa ini, mereka tidak boleh ditakrifkan oleh kelas atau kaedah lain. Menggunakan kaedah ini, gaya boleh diubah suai dengan cepat dan mengatasi tetapan lain.

2. Tukar kelas dan id

id dan kelas ialah "cangkuk" untuk menetapkan gaya Selepas perubahan, penyemak imbas akan mengemas kini gaya elemen secara automatik.

Kaedah menukar id adalah serupa dengan kelas, tetapi saya secara peribadi tidak mengesyorkan menggunakannya dengan cara ini kerana id digunakan untuk mencari elemen Sebaik-baiknya jangan gunakannya untuk menentukan gaya paparan elemen dan id sering digunakan sebagai cangkuk JavaScript Boleh menyebabkan ralat yang tidak perlu.
Dalam JavaScript, kelas ialah kata kunci simpanan, jadi gunakan className sebagai atribut untuk mengakses kelas elemen, contohnya:

Tetapi apa yang lebih menyedihkan ialah atribut ini ialah rentetan yang mengandungi semua kelas elemen Semua kelas dipisahkan oleh ruang, yang menjadikannya sangat menyusahkan apabila memadamkan kelas (hanya tambahkannya, buat sambungan rentetan di antara mereka) , tetapi ingat untuk menambah ruang di hadapan~).

.redColor{
 color: red;
}
.yellowBack{
 background: yellow;
}
element.className = "redColor";//设置class
element.className += " yellowBack";//增加class

Saya menggunakan ungkapan biasa semasa memadam, dan memadamkan kelas mengikut kedudukannya yang berbeza dalam rentetan (kepala, ekor, tengah), tetapi kemudian saya memikirkan cara yang lebih baik, iaitu memadam kelas pada permulaan dan akhir daripada atribut className. Tambahkan ruang pada setiap satu, dan kemudian semuanya menjadi kaedah tengah, secara langsung menggantikan subrentetan:

Sebaik-baiknya menggunakan kaedah ini untuk pengubahsuaian gaya umum, JavaScript hanya mengeluarkan arahan untuk perubahan gaya.

//删除class
function removeClass(element,classRomove){
var classNames = " "+element.className+" ";
classNames = classNames .replace(" "+classRomove+" ", " ");
//String.trim(classNames);
element.className = classNames;
}

Dua kaedah terakhir tidak elegan dan tidak mempunyai isu keserasian tertentu, jadi saya tidak akan memperkenalkannya~

3. Dapatkan gaya sebenar

Perkara pertama yang perlu dijelaskan ialah tidak boleh menggunakan elemen.gaya Ia hanya boleh mendapatkan gaya sebaris dan takrifan dalam helaian gaya tidak boleh diperolehi. Memandangkan gaya sesuatu elemen boleh ditakrifkan di banyak tempat, sukar untuk menyatakan gaya sebenar unsur tersebut. Adakah terdapat sebarang cara untuk memaparkan gaya sebenar unsur tersebut dalam penyemak imbas?

Malah, kedua-dua Microsoft dan W3C menyediakan kaedah yang sepadan Kami hanya perlu merangkumnya untuk menggunakannya:

Ingat bahawa styleName yang diluluskan adalah dalam "format sarung unta"~~

//获取元素样式
function getRealStyle(element,styleName){
var realStyle = null;
if(element.currentStyle){
realStyle = element.currentStyle[styleName];//IE
}else if(window.getComputedStyle){
realStyle=window.getComputedStyle(element,null)[styleName];//W3C
}
return realStyle;
}

4. Memaparkan dan menyembunyikan borang (jangan menyalahgunakan CSS)

Kami sering melihat beberapa pilihan borang ditambah secara dinamik Contohnya, jika anda memilih "Berkahwin" sebagai status perkahwinan anda dalam borang, maka akan ada kotak input tambahan untuk anda memasukkan nama pasangan anda.

Jika tiada pilihan, sudah tentu anda perlu menyembunyikan semua borang berkaitan "pasangan", tetapi anda tidak boleh menggunakan CSS untuk menyelesaikannya pada masa ini, iaitu, anda tidak boleh menggunakan style.display="none" untuk menyembunyikannya.

Kerana tidak kira anda menyembunyikannya atau tidak, kotak input ada di sana, tidak bertambah atau berkurang~ [Halo] Secara terang-terangan, walaupun ia tersembunyi, ia masih wujud dalam DOM Jika pengguna menyerahkan borang di kali ini, kandungan kotak input tersembunyi ini akan diserahkan bersama-sama dan beberapa ralat yang tidak dijangka mungkin berlaku~

Pendekatan yang betul ialah meletakkan kandungan ini ke dalam ruang hiper DOM, supaya tiada masalah di atas.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.