Selama proses pengembangan, kita sering menemukan gaya elemen DOM melalui JS. Ada banyak metode, seperti: dengan mengubah kelas elemen DOM. Sekarang kita membahas JS asli untuk mendapatkan gaya elemen dom CSS, perhatikan bahwa itu bukan pengaturan
Sebelum memulai, mari kita bicara terlebih dahulu tentang mendapatkan semua objek atribut CSS yang akhirnya diterapkan pada elemen. Jika tidak ada gaya yang diatur ke elemen, gaya default browser akan dikembalikan.
1.ele.style
Saat belajar DOM, saya melihat bahwa nilai gaya elemen diperoleh melalui ELE. STYLE, tetapi kadang -kadang yang saya dapatkan bukanlah nilai gaya dari node, tetapi nilai kosong. Ini karena ELE.Style hanya bisa mendapatkan nilai gaya yang ditulis dalam atribut gaya dalam tag elemen, dan tidak bisa mendapatkan atribut gaya yang didefinisikan dalam <tyle> </style> dan dimuat melalui <link href = "css.css">
contoh:
var test = document.getElementById ("test"); // Dapatkan tes warna. Style.color dari node;2. GetComputedStyle ()
GetComputedStyle adalah nilai atribut CSS yang bisa mendapatkan semua nilai atribut CSS akhir yang digunakan dari elemen saat ini.
Sintaksnya adalah sebagai berikut:
window.getComputedStyle ("elemen", "pseudo-class");Metode ini menerima dua parameter: untuk mendapatkan elemen gaya yang dihitung dan string elemen semu (misalnya ": sebelum"). Jika informasi elemen semu tidak diperlukan, parameter kedua bisa nol. Ini juga dapat digunakan melalui document.defaultview.getComputedStyle ("elemen", "pseudo-class");
contoh:
var test = document.getElementById ("test"), demo = window.getComputedstyle (test, null); // Dapatkan Demo Warna. Color dari NodeCatatan: Firefox dan Safari akan mengonversi warna menjadi format RGB. Jika tidak ada gaya pada node uji, gunakan style.length untuk melihat jumlah gaya default browser. IE6-8 tidak mendukung metode ini, metode berikut diperlukan
3. ELE.CURRENTSTYLE
CurrentStyle adalah atribut dari browser IE itu sendiri. Sintaksnya mirip dengan ELE. STYLE. Perbedaannya adalah bahwa elemen.CurrentStyle Mengembalikan nilai atribut CSS akhir dari elemen yang saat ini diterapkan (termasuk file CSS tautan eksternal, atribut <yaya> yang tertanam di halaman, dll.).
tata bahasa:
var style = dom.currentstyle;
contoh:
var test = document.getElementById ("test"), demo = test.currentstyle; // Dapatkan Demo Warna. Color dari Node;Catatan: Untuk perbatasan atribut yang komprehensif, dll., IE pengembalian tidak ditentukan. Beberapa browser lain mengembalikan nilai, dan beberapa tidak kembali, tetapi atribut seperti nilai pengembalian borderleftwidth.
4. GetPropertyValue ()
GetPropertyValue Mendapat nama properti langsung dari gaya CSS
Sintaksnya adalah sebagai berikut:
window.getComputedStyle (elemen, null) .getPropertyValue (properti)
contoh:
var test = document.getElementById ('test'); window.getComputedStyle (test, null) .getPropertyValue ("latar belakang-warna");Catatan: Nama atribut tidak mendukung format unta, IE6-8 tidak mendukung metode ini, jadi metode berikut diperlukan
5. GetAttribute
GetAttribute mirip dengan GetPropertyValue, satu perbedaan adalah format unta dari nama properti
contoh:
var test = document.getElementById ('test'); window.getComputedStyle (test, null) .getPropertyValue ("BackgroundColor");Catatan : Metode ini hanya mendukung IE6-8
ringkasan:
Metode jQuery CSS (), operasi yang mendasarinya menggunakan metode GetComputedStyle dan GetPropertyValue. Ketika kami menggunakan pengembangan JS asli, kami bisa mendapatkan nilai elemen melalui metode di atas.
Berikut ini adalah metode yang kompatibel dengan IE, Firefox, Chrome dan browser lainnya untuk mendapatkan gaya elemen, yang dapat diterapkan pada proyek
fungsi getStyle (ele) {var style = null; if (window.getComputedstyle) {style = window.getComputedstyle (ele, null); } else {style = ele.currentstyle; } return style;}Cara sederhana di atas untuk mendapatkan gaya elemen di JS asli adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.