PS: Ini untuk mendapatkan gaya, bukan untuk mengatur gayanya. Jika tidak ada nilai gaya yang ditetapkan untuk elemen, nilai default yang diberikan oleh browser dikembalikan. (Forum disortir)
1. Element.Style: Hanya nilai gaya yang ditulis dalam atribut gaya dalam tag elemen yang tidak dapat diperoleh. Atribut gaya yang didefinisikan dalam <tyle> </style> dan dimuat melalui <link href = "css.css"> tidak dapat diperoleh.
Salinan kode adalah sebagai berikut:
var ele = document.geteLementById ('ele');
Ele.Style.Color; // Dapatkan warnanya
2. Window.getComputedStyle (): Ini dapat memperoleh semua nilai atribut CSS akhir dari elemen saat ini.
Salinan kode 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");
Salinan kode adalah sebagai berikut:
var ele = document.geteLementById ('ele');
var styles = window.getComputedStyle (ele, null);
styles.color; // Dapatkan warnanya
Anda dapat menggunakan style.length untuk melihat jumlah gaya default browser. IE6-8 tidak mendukung metode ini, dan metode berikut perlu digunakan. Untuk Firefox dan Safari, warnanya akan dikonversi ke format RGB.
3. Element.CurrentStyle: Khusus untuk IE, ia mengembalikan nilai atribut CSS akhir dari elemen yang saat ini diterapkan (termasuk file tautan eksternal CSS, atribut <yesty> yang tertanam di halaman, dll.).
Salinan kode adalah sebagai berikut:
var ele = document.geteLementById ('ele');
var styles = ele.currentstyle;
styles.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 (): Dapatkan nama properti langsung dari gaya CSS
Salinan kode adalah sebagai berikut:
var ele = document.geteLementById ('ele');
window.getComputedStyle (ele, null) .getPropertyValue ('color');
Catatan: Nama atribut tidak mendukung format unta, IE6-8 tidak mendukung metode ini, jadi metode berikut diperlukan
5. getAttribute (): Mirip dengan GetPropertyValue, One Difference adalah format unta dari nama properti
Salinan kode adalah sebagai berikut:
var test = document.getElementById ('test');
window.getComputedStyle (test, null) .getPropertyValue ("BackgroundColor");
Catatan: Metode ini hanya mendukung IE6-8.
Metode perolehan gaya berikut kompatibel dengan IE, Chrome, Firefox, dll.
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;
}
Dalam jQuery, CSS () umumnya digunakan untuk mendapatkan sifat gaya, dan operasinya yang mendasarinya menggunakan metode GetComputedStyle dan GetPropertyValue.