Javascript asli mendapat tip style_javascript elemen

Ringkasan:
Semasa proses pembangunan, kita sering menghadapi mendapatkan atau menukar gaya elemen DOM melalui js Terdapat banyak kaedah, seperti menukar kelas elemen DOM. Sekarang kita membincangkan js asli untuk mendapatkan gaya CSS elemen DOM Ambil perhatian bahawa ia mendapat dan bukan menetapkan

Sebelum kita mula, mari kita bincangkan tentang maksud mendapatkan semua objek atribut CSS yang akhirnya digunakan pada elemen Jika tiada gaya ditetapkan untuk elemen, gaya lalai penyemak imbas juga akan dikembalikan.

1.ele.style
Semasa saya belajar DOM, saya melihat bahawa nilai gaya elemen diperoleh melalui ele.style, tetapi kadangkala apa yang diperoleh bukan nilai gaya nod, tetapi nilai nol. Ini kerana ele.style hanya boleh mendapatkan nilai gaya yang ditulis dalam atribut gaya dalam teg elemen dan tidak boleh mendapatkan nilai gaya yang ditakrifkan dalam dan melalui Atribut gaya dimuatkan

Contoh:

Salin kod Kod adalah seperti berikut:

         var test = document.getElementById("test");
//Dapatkan warna nod
         test.style.color;

2. getComputedStyle()
GetComputedStyle ialah kaedah yang boleh mendapatkan semua nilai atribut CSS akhir ​​bagi elemen semasa.

Sintaks adalah seperti berikut:

window.getComputedStyle("Element", "Pseudo-class");

Kaedah ini menerima dua parameter: elemen untuk mendapatkan gaya yang dikira dan rentetan unsur pseudo (seperti ":sebelum"). Jika maklumat unsur pseudo tidak diperlukan, parameter kedua boleh menjadi batal. Anda juga boleh menggunakan document.defaultView.getComputedStyle("Element", "Pseudo-class");

Contoh:

Salin kod Kod adalah seperti berikut:

         var test = document.getElementById("test"),
          demo = window.getComputedStyle(ujian, null); //Dapatkan warna nod
demo.warna

Nota: Firefox dan Safari akan menukar warna kepada format rgb Jika tiada gaya pada nod ujian, gunakan style.length untuk menyemak bilangan gaya lalai penyemak imbas. IE6-8 tidak menyokong kaedah ini, anda perlu menggunakan kaedah berikut

3. ele.currentStyle currentStyle ialah atribut penyemak imbas IE itu sendiri. tertanam dalam halaman tunggu).

Tatabahasa:

gaya var = dom.currentStyle;

Contoh:

Salin kod Kod adalah seperti berikut:

         var test = document.getElementById("test"),
         demo = test.currentStyle; //Dapatkan warna nod
        demo.color;


Nota: Untuk sifat komprehensif seperti sempadan, IE mengembalikan tidak ditentukan, penyemak imbas lain mungkin mengembalikan nilai dan sesetengahnya mungkin tidak mengembalikan nilai, tetapi sifat seperti borderLeftWidth mengembalikan nilai

4. getPropertyValue()

GetPropertyValue mendapat nama sifat langsung gaya CSS Sintaks adalah seperti berikut:

window.getComputedStyle(elemen, null).getPropertyValue(property)

Contoh:

Salin kod Kod adalah seperti berikut: var test = document.getElementById('test');

        window.getComputedStyle(test, null).getPropertyValue("background-color");

Nota: Nama atribut tidak menyokong format sarung unta IE6-8 tidak menyokong kaedah ini Anda perlu menggunakan kaedah berikut

5. dapatkanAttribute
getAttribute serupa dengan getPropertyValue, satu-satunya perbezaan ialah format kes unta bagi nama atribut

Contoh:

Salin kod Kod adalah seperti berikut:

         var test = document.getElementById('test');
          window.getComputedStyle(test, null).getPropertyValue("backgroundColor");

Nota: Kaedah ini hanya menyokong IE6-8

Ringkasan:
Kaedah CSS() jQuery menggunakan kaedah getComputedStyle dan getPropertyValue dalam operasi asasnya Apabila kita menggunakan pembangunan js asli, kita boleh mendapatkan nilai elemen melalui kaedah di atas.

Berikut ialah kaedah untuk mendapatkan gaya elemen yang serasi dengan IE, Firefox, Chrome dan penyemak imbas lain serta boleh digunakan pada projek

Salin kod Kod adalah seperti berikut:

fungsi getStyle(ele) {
gaya var = null;
 
If(window.getComputedStyle) {
          gaya = window.getComputedStyle(ele, null);
}lain{
          gaya = ele.currentStyle;
}
 
Gaya kembali;
}