ringkasan:
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:
Salinan kode adalah sebagai berikut:
var test = document.getElementById ("test");
// Dapatkan warna node
test.style.color;
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:
Salinan kode adalah sebagai berikut:
var test = document.geteLementById ("test"),
demo = window.getComputedStyle (test, null);
// Dapatkan warna node
demo.color
Catatan: 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:
Salinan kode adalah sebagai berikut:
var test = document.geteLementById ("test"),
demo = test.currentstyle;
// Dapatkan warna node
demo.color;
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:
Salinan kode adalah sebagai berikut:
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:
Salinan kode adalah sebagai berikut:
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
Salinan kode adalah sebagai berikut:
function getstyle (ele) {
var style = null;
if (window.getComputedstyle) {
style = window.getComputedStyle (ele, null);
}kalau tidak{
style = ele.currentstyle;
}
gaya pengembalian;
}