Selalu ada banyak masalah kompatibilitas untuk mendapatkan gaya perhitungan elemen HTML, dan ada beberapa perbedaan antar browser. Firefox dan Webkit (Chrome, Safari) mendukung metode standar W3C: getComputedStyle (), sedangkan IE6/7/8 tidak mendukung metode standar, tetapi memiliki atribut pribadi untuk mengimplementasikannya: CurrentStyle, IE9 dan Dukungan Opera keduanya. Dengan 2 metode dan atribut ini, sebagian besar persyaratan pada dasarnya dapat dipenuhi.
Salinan kode adalah sebagai berikut:
var getStyle = function (elem, type) {
return 'getComputedStyle' di jendela? getComputedStyle (elem, null) [type]: elem.currentstyle [type];
};
Namun, menggunakan CurrentStyle untuk lebar dan tinggi adaptif tidak dapat memperoleh nilai yang dihitung, sehingga hanya dapat mengembalikan otomatis, dan getComputedStyle () dapat mengembalikan nilai yang dihitung. Ada beberapa cara untuk menyelesaikan masalah ini. Apa yang saya pikirkan sebelumnya adalah mengurangi nilai bantalan menggunakan ClientWidth/ClientHeight sehingga lebar dan tinggi yang dihitung dapat diperoleh di browser yang tidak mendukung metode standar. Beberapa hari yang lalu, saya melihat Situ Zhengmei mengadopsi metode lain, menggunakan metode getBoundingClientRect () untuk mendapatkan posisi elemen di halaman, dan kemudian kurangi kanan kiri adalah lebar, bagian bawah pengangkutan bawah adalah ketinggian. Saya membuat beberapa perubahan kecil pada kodenya, dan kode terakhir adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
var getStyle = function (elem, style) {
return 'getComputedStyle' di jendela?
getComputedStyle (elem, null) [style]:
fungsi(){
style = style.replace (//-(/w)/g, function ($, $ 1) {
mengembalikan $ 1.tuppercase ();
});
var val = elem.currentstyle [style];
if (val === 'auto' && (style === "width" || style === "height")) {
var rect = elem.getBoundingClientRect ();
if (style === "width") {
return rect.right - rect.left + 'px';
}kalau tidak{
return rect.bottom - rect.top + 'px';
}
}
return val;
} ();
};
// Panggil metode ini
var test = document.geteLementById ('test'),
// Dapatkan lebar yang dihitung
twidth = getStyle (tes, 'width');
Masalah baru, jika lebar atau tinggi elemen menggunakan unit EM atau %, nilai yang dikembalikan oleh getComputedStyle () akan secara otomatis mengubah EM atau % menjadi unit PX, dan CurrentStyle tidak akan. Jika ukuran font menggunakan EM sebagai unit, 0em yang dikembalikan di bawah opera benar-benar menakutkan!
Kemudian, saya menemukan beberapa masalah kompatibilitas yang tidak terduga dalam penggunaan saya. Hari ini saya mengoptimalkan kode asli dan menangani beberapa masalah kompatibilitas umum.
Dalam JavaScript, "-" (menulis atau tanda hubung) mewakili tanda minus, sedangkan di CSS, banyak properti gaya memiliki simbol ini, seperti padding-kiri, ukuran font, dll., Jadi jika kode berikut muncul dalam JavaScript, itu akan menjadi kesalahan:
Salinan kode adalah sebagai berikut: elem.style.margin-left = "20px";
Cara yang benar untuk menulisnya harus:
Salinan kode adalah sebagai berikut: elem.style.marginleft = "20px";
Di sini Anda perlu menghapus skor tengah CSS dan memanfaatkan huruf-huruf yang awalnya diikuti oleh skor tengah, umumnya dikenal sebagai metode penulisan "gaya unta". Apakah itu menggunakan JavaScript untuk mengatur atau mendapatkan elemen, gaya CSS harus menjadi gaya unta. Namun, banyak pemula yang akrab dengan CSS tetapi tidak terbiasa dengan JavaScript akan selalu membuat kesalahan tingkat rendah ini. Menggunakan penggunaan ganti canggih dapat dengan mudah mengganti skor tengah di atribut CSS dengan gaya unta.
Salinan kode adalah sebagai berikut: var newProp = prop.replace (//-(/w)/g, fungsi ($, $ 1) {
mengembalikan $ 1.tuppercase ();
});
Untuk float, ini adalah kata yang dipesan di JavaScript. Ada alternatif lain untuk mengatur atau mendapatkan nilai float dari elemen dalam JavaScript. Ini adalah cssfloat di browser standar, dan stylefloat di IE6/7/8.
Jika tidak ada nilai eksplisit untuk atas, kanan, bawah, dan kiri, beberapa browser akan mengembalikan mobil saat mendapatkan nilai -nilai ini. Meskipun nilai auto adalah nilai atribut CSS legal, itu sama sekali bukan hasil yang kita inginkan, tetapi harus 0px.
Dalam IE6/7/8, untuk mengatur transparansi suatu elemen, filter, seperti: filter: alpha (opacity = 60), untuk browser standar, cukup mengatur opacity secara langsung, dan keduanya dukungan metode penulisan IE9, saya juga telah membuat pemrosesan kompatibilitas untuk mendapatkan transparansi elemen. Selama Anda menggunakan opacity, Anda bisa mendapatkan nilai transparansi dari semua elemen browser.
Mendapatkan lebar dan tinggi elemen di IE6/7/8 telah diperkenalkan di artikel sebelumnya, jadi saya tidak akan mengulanginya di sini. Hal lain yang perlu diperhatikan adalah bahwa jika gaya elemen ditulis inline menggunakan gaya, atau jika atribut gaya telah diatur menggunakan JavaScript, Anda dapat menggunakan metode berikut untuk mendapatkan gaya elemen yang dihitung:
Salinan kode adalah sebagai berikut:
var height = elem.style.height;
Metode ini lebih cepat daripada membaca nilai properti di GetComputedStyle atau CurrentStyle, dan harus digunakan terlebih dahulu. Tentu saja, prasyaratnya adalah bahwa gaya diatur melalui penulisan inline (menggunakan pengaturan JavaScript juga mengatur gaya inline). Kode akhir yang dioptimalkan adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
var getStyle = function (elem, p) {
var rpos = /^(kiri | kanan | atas | bawah) $ /,
ecma = "getComputedStyle" di jendela,
// Konversikan skor tengah menjadi pola unta seperti: padding-left => paddingleft
p = p.replace (//-(/w)/g, function ($, $ 1) {
mengembalikan $ 1.tuppercase ();
});
// Proses float
p = p === "float"? (ECMA? "CSSFLOAT": "StyleFloat"): P;
kembali !! Elem.Style [P]?
Elem.Style [p]:
ECMA?
fungsi(){
var val = getComputedStyle (elem, null) [p];
// Tangani situasi di mana atas, kanan, bawah, dan kiri adalah otomatis
if (rpos.test (p) && val === "auto") {
mengembalikan "0px";
}
return val;
} ():
fungsi(){
var <a href = "http://wirelesscasinogames.com"> wirelesscasinogames.com </a> val = elem.currentstyle [p];
// Dapatkan lebar dan tinggi elemen di IE6/7/8
if ((p === "lebar" || p === "tinggi") && val === "auto") {
var rect = elem.getBoundingClientRect ();
return (p === "lebar"? rect.right - rect.left: rect.bottom - rect.top) "px";
}
// Dapatkan transparansi elemen di IE6/7/8
if (p === "opacity") {
var filter = elem.currentstyle.filter;
if (/opacity/.test(filter)) {
val = filter.match (// d /) [0] / 100;
return (val === 1 || val === 0)? val.tofixed (0): val.tofixed (1);
}
lain if (val === tidak terdefinisi) {
mengembalikan "1";
}
}
// Tangani situasi di mana atas, kanan, bawah, dan kiri adalah otomatis
if (rpos.test (p) && val === "auto") {
mengembalikan "0px";
}
return val;
} ();
};
Berikut adalah contoh panggilan:
Salinan kode adalah sebagai berikut:
<tyle>
.kotak{
Lebar: 500px;
Tinggi: 200px;
Latar belakang:#000;
filter: alpha (opacity = 60);
Opacity: 0.6;
}
</tyle>
<Div id = "box"> </div>
<script>
var box = document.geteLementById ("box");
waspada (getStyle (kotak, "lebar")); // "500px"
waspada (getStyle (kotak, "latar belakang-warna")); // "RGB (0, 0, 0)" / "#000"
waspada (getStyle (kotak, "opacity")); // "0,6"
waspada (getStyle (kotak, "float")); // "tidak ada"
</script>