Pengantar Perbedaan Antara Gaya, CurrentStyle, GetComputedStyle
Ada tiga cara untuk bergaya lembar
Gaya Inline: Tertulis dalam tag. Gaya inline hanya berlaku untuk semua tag.
Lembar Gaya Internal: Ditulis dalam HTML, dan gaya internal hanya berlaku untuk halaman web.
Lembar Gaya Eksternal: Jika banyak halaman web perlu menggunakan gaya yang sama, tulis gaya dalam file CSS dengan .css sebagai akhiran, dan kemudian referensi file CSS di setiap halaman web yang perlu menggunakan gaya ini. Atribut gaya yang paling umum digunakan adalah. Dalam JavaScript, nilai XXX dapat diperoleh melalui Document.GetElementById (ID) .STYLE.XXXX. Namun, secara tak terduga, ini hanya dapat memperoleh nilai gaya yang ditetapkan melalui metode tertanam, yaitu, nilai yang ditetapkan dalam atribut gaya.
Solusi: Perkenalkan gaya CurrentStyle, Runtimestyle, GetComputedStyle Style Standard, yang dapat ditentukan oleh atribut gaya!
Gaya runtime runtimestyle! Jika tumpang tindih dengan properti gaya, properti gaya akan ditimpa!
CurrentStyle mengacu pada kombinasi gaya dan runtimestyle! Anda bisa mendapatkan nilai gaya CSS yang dirujuk melalui inline atau eksternal melalui CurrentStyle (hanya yaitu). Misalnya: document.getElementById ("test"). Currentstyle.top
Agar kompatibel dengan FF, Anda harus membutuhkan GetComputedStyle untuk melakukannya
Catatan: GetComputedStyle ada di Firefox, CurrentStyle ada di IE. Misalnya
<tyle> #mydiv {width: 300px;} </tyle>Tetapi:
var myDiv = document.geteLementById ('myDiv'); if (myDiv.currentstyle) {var width = myDiv.currentstyle ['width']; waspada ('ie:' + width);} else if (window.getComputedStyle) {var width = window.getCompute if (window.getComputedStyle) {var width = window.getCompute (window.getComputedStyle) {var wldth = window.getcompute (window.getComputedStyle) {var wldth = window.getCompute (window.getComputedStyle) {var wldth = window.getCompute. null) ['width']; alert ('firefox:' + width);}Selain itu, di bawah FF, Anda juga bisa mendapatkannya dengan cara berikut
document.defaultview.getComputedstyle (myDiv, null) .width; window.getComputedstyle (myDiv, null) .width;
Berikut beberapa tambahan:
Saat membaca blog, saya melihat 3 orang ini - gaya, gaya lancar, getComputedStyle. Saya belum pernah menemukannya ketika saya belajar sebelumnya, tetapi sekarang saya telah menemuinya, jadi saya sudah mempelajarinya sebentar. Saya menemukan beberapa masalah, mungkin itu karena usia waktu, atau mungkin karena ketidaktahuan saya, tetapi itu benar -benar membuat saya bingung. Meskipun Tao Yuanming mengatakan bahwa dia tidak mencari banyak pemahaman ketika belajar, sebagai pengembang front-end yang ingin menjadi front-end yang sangat baik, dia masih perlu memahaminya, jika tidak dia tidak akan bisa tidur!
Mari kita letakkan dasar terlebih dahulu. Mari kita bicara tentang tiga bentuk lembaran gaya cascading (tiga jenis memiliki nama yang berbeda, sesuai dengan kebiasaan masing -masing):
satu. Gaya inline: Set dengan atribut gaya dalam tag HTML. menyukai:
1 <p style = "warna:#f90;"> Ini adalah gaya inline </p>
dua. Embed Style: Setel melalui tag <head> melalui tag <tyle>. menyukai:
<type style = "text/css">/*Ini adalah gaya embed*/.stuff {color:#f90} </style>tiga. Gaya Eksternal: Setel melalui tag <link>. menyukai:
<tautan rel = "stylesheet" href = "path/style.css" type = "text/css"> ========================================================================================= .stuff {color:#f90;}Metode ketiga direkomendasikan.
Tiga protagonis di bawah ini ada di lapangan.
Orang pertama yang berjalan perlahan ke arah kami adalah gaya. Ini digunakan dalam obj.style.attr; Seorang kritikus film mengomentari blognya:
Gaya hanya bisa mendapatkan gaya inline elemen, dan gaya dalam dan luar tidak dapat diperoleh menggunakan gaya.
Saya memverifikasi dengan kode berikut, dan memang seperti yang disebutkan di atas. Saya menggunakan tiga gaya dan hasil yang saya dapatkan adalah nilai gaya inline.
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Unt titled document</title> <link href="style.css" rel="stylesheet" type="text/css"/> <type style = "text/css"> #stuff {width: 300px;} </style> <script type = "text/javascript"> window.onload = function () {var odiv = document.geteLementById ('stuff'); console.log (odiv.style.width); //alert(odiv.style.width); }; </script> </head> <body> <Div id = "stuff"> </div> </body> </html>Eksternal Link Stylesheet style.css:
1 @charset "UTF-8"; 2 / * Dokumen CSS * / 3 #stuff {width: 100px;}
Hasilnya adalah 400px.
Gaya berikut adalah CurrentStyle, yang dikatakan memiliki dukungan MS yang kuat, yang berarti bahwa orang ini hanya dapat digunakan di browser IE. Yang lain tidak bagus. Ini digunakan oleh window.currentstyle ["attr '] atau window.currentstyle.attr. Di IE, dapatkan nilai atribut lebar 300px dalam lembar gaya tertanam, yang tidak dapat diteruskan di Mozilla Firefox.
Yang terakhir datang ke getComputedStyle, yang menggunakan window.getComputedStyle (ob, pseudoelt) ["attr '] atau window.getComputedStyle (ob, pseudoelt) .attr. Di antaranya, pseudoelt mewakili pseudoclass seperti: after,: sebelumnya. Jika Anda tidak menggunakan a nouns a not a no shoels a nouns a noing a pseudoclass seperti: after, after.
Kritikus film berkomentar:
GetComputedStyle berfungsi sama dengan CurrentStyle, tetapi cocok untuk FF, Opera, Safari, dan Chrome.
Dengan sikap skeptis, saya memverifikasi lagi, dan IE7, IE8, dan IE9 semua kesalahan yang dilaporkan:
Objek tidak mendukung atribut atau metode "getComputedStyle"
Masalah kompatibilitas browser. Masalah kompatibilitas browser memang sakit kepala bagi pengembang front-end, terutama penyebab IE6. Tapi kita tidak bisa takut dan menjauh darinya, tetapi sebaliknya berurusan dengan gerakan, dan tentara datang untuk memblokir air dan tanah. Anda akan bersenang -senang dalam pertarungan dengan itu dan rasa prestasi setelah mengalahkannya! Lai Lai
Poin lain: GetComputedStyle dan CurrentStyle hanya bisa mendapatkan nilai atribut, tetapi tidak dapat mengatur atribut. Jika Anda ingin mengatur nilai atribut, gunakan ob.style.attr.
Tolong beri saya saran jika ada yang salah, terima kasih sebelumnya! Lai