Metode JavaScript untuk mendapatkan nilai atribut CSS: GetComputedStyle dan CurrentStyle
1. Untuk gaya inline CSS elemen (<div style = "Color:#369"> Hello </div>), Anda dapat secara langsung menggunakan elemen.style.color untuk secara langsung mendapatkan nilai atribut CSS;
2. Namun, tidak mungkin untuk mendapatkan gaya CSS yang didefinisikan secara eksternal. Selain itu, metode yang digunakan oleh IE browser berbeda dari browser standar lainnya (Firefox, Chrome, Opera, Safari). IE Browser menggunakan elemen.currentstyle, dan browser standar W3C menggunakan GetComputedStyle untuk mendapatkan.
1. IE Mendapat Nilai Atribut CSS yang didefinisikan secara eksternal di elemen: Element.CurrentStyle
Objek CurrentStyle mengembalikan stylesheet pada elemen, tetapi objek gaya hanya mengembalikan gaya tertanam yang diterapkan pada elemen melalui atribut tag gaya.
Oleh karena itu, nilai gaya yang diperoleh melalui objek CurrentStyle mungkin berbeda dari nilai gaya yang diperoleh melalui objek gaya.
Misalnya, jika nilai properti warna dari paragraf diatur ke merah (merah) melalui tautan atau stylesheet embed alih -alih tertanam, objek .currentstyle.color akan mengembalikan warna yang benar, dan gaya objek. Color tidak dapat mengembalikan nilainya. Namun, jika pengguna menentukan <p style = "color: 'red'">, baik saat ini dan objek gaya akan mengembalikan nilai merah.
Objek CurrentStyle mencerminkan prioritas gaya dalam lembar gaya. Di HTML, pesanan ini adalah:
1) Gaya inline
2) Aturan Stylesheet
3) Atribut Tag HTML
4) Definisi internal tag HTML
2. W3C memperoleh nilai atribut CSS yang didefinisikan secara eksternal: window.getComputedstyle (elemen, pseudoelt)
Elemen yang diperlukan, elemen html
Pseudoelt diperlukan untuk mendapatkan gaya elemen kelas semu
Salinan kode adalah sebagai berikut:
fungsi getStyle (node, properti) {
if (node.style [properti]) {
return node.style [properti];
}
lain if (node.currentstyle) {
return node.currentstyle [properti];
}
else if (document.defaultview && document.defaultview.getComputedstyle) {
var style = document.defaultview.getComputedstyle (node, null);
return style.getPropertyValue (properti);
}
kembali nol;
}