JavaScript HTML DOM - menukar CSS

JavaScript HTML DOM - Menukar CSS

Terdapat 4 cara untuk mengubah suai CSS dalam JavaScript:

Ubah suai gaya nod (gaya sebaris);

Tukar kelas atau id nod;

tulis css baharu;

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 nanti.

1. Ubah suai gaya nod (gaya sebaris)

Kaedah ini mempunyai pemberat tertinggi. Ia akan mengatasi gaya yang ditetapkan oleh kaedah lain. Kaedah penggunaan adalah sangat mudah:

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

Walau bagaimanapun, perlu diingatkan bahawa beberapa nama gaya CSS terdiri daripada beberapa perkataan, seperti saiz fon, imej latar belakang, dsb., dan semuanya disambungkan dengan sempang (-) , namun dalam JavaScript sengkang bermaksud "tolak", jadi ia tidak boleh digunakan sebagai nama atribut. Kita perlu menggunakan "camelCase" untuk menulis nama atribut, seperti fontSize, backgroundImage.

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 serta-merta (berkaitan dengan tingkah laku) elemen yang kerap berubah Contohnya, div yang boleh digunakan untuk menyeret kehendak change its Atribut atas dan kiri sentiasa berubah Pada masa ini, ia tidak boleh ditakrifkan oleh kelas atau kaedah lain Dengan menggunakan kaedah ini, gaya boleh diubah suai serta-merta dan mengatasi tetapan kaedah 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 Adalah lebih baik untuk tidak menggunakannya 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:

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

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

Saya menggunakan ungkapan biasa semasa memadam, dan memadam kelas mengikut kedudukannya yang berbeza dalam rentetan (kepala, ekor, tengah), tetapi kemudian saya memikirkan cara yang lebih baik, iaitu memadamkannya dalam className Add ruang pada permulaan dan akhir atribut, kemudian semuanya menjadi kaedah tengah, terus menggantikan subrentetan:

//Padam kelas

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

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

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

3. Mendapatkan gaya sebenar

Perkara pertama yang perlu dibuat jelas ialah , elemen.style tidak boleh dilalui. 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 rupa gaya sebenar unsur tersebut? Adakah terdapat sebarang cara untuk memaparkan gaya sebenar unsur tersebut dalam penyemak imbas?< . >

4. Menunjukkan dan menyembunyikan borang (jangan menyalahgunakan CSS)

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

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

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

Cara yang betul ialah meletakkan kandungan ini ke dalam ruang hiper DOM, supaya ia akan bukan saya ada masalah di atas