Kode Dasar:
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Title> dokumen </iteme> <tyle> div {color: yellow; } </tyle> </head> <body> <div> Ini adalah div </div> </body> </html>1. Dapatkan dengan menggunakan atribut elemen.
<script> var div = document.geteLementsbyTagname ("div") [0]; console.log (div.style.color); // "" console.log (div.style.backgroundcolor); // merah </script>Atribut Element.Style hanya bisa mendapatkan gaya inline, tidak bisa mendapatkan gaya dalam tag <tyle>, juga tidak bisa mendapatkan gaya eksternal.
Karena Element.Style adalah atribut suatu elemen, kami dapat menugaskan kembali atribut untuk mengesampingkan tampilan elemen.
<script> var div = document.geteLementsbyTagname ("div") [0]; Div.Style ['latar belakang'] = "hijau"; console.log (div.style.backgroundcolor); // hijau </script>2. Dapatkan gaya melalui GetComputedStyle dan CurrentStyle
Lingkungan Penggunaan GetComputedStyle adalah Chrome/Safari/Firefox yaitu 9,10,11
<script> var div = document.geteLementsbyTagname ("div") [0]; var styleobj = window.getComputedStyle (div, null); console.log (styleobj.backgroundcolor); // red console.log (styleobj.color); // kuning </script>CurrentStyle dapat didukung dengan sempurna di IE, Chrome tidak mendukung, FF tidak mendukung
<script> var div = document.geteLementsbyTagname ("div") [0]; var styleobj = div.currentstyle; console.log (styleobj.backgroundcolor); // red console.log (styleobj.color); // kuning </script>3. Perbedaan antara ELE. Style dan GetComputedStyle atau CurrentStyle
3.1ele.Style adalah baca-tulis, sedangkan GetComputedStyle dan CurrentStyle hanya baca
3.2 ELE. STYLE hanya bisa mendapatkan set gaya CSS di properti gaya di baris, dan GetComputedStyle dan CurrentStyle juga bisa mendapatkan nilai default lainnya.
3.3 Apa yang Ele. gaya mendapatkan gaya dalam atribut gaya, belum tentu gaya terakhir, sementara dua lainnya mendapatkan gaya CSS terakhir dari elemen
4. Dapatkan Penulisan Kompatibilitas Gaya
<script> // Dapatkan gaya non-line (gaya dalam tag gaya atau gaya dalam file tautan css), obj adalah elemen, attr adalah fungsi gaya gaya getstyle (obj, attr) {// untuk yaitu if (obj.currentstyle) {return obj.currentstyle [attr]; // Karena attr yang dilewati oleh fungsi adalah string, Anda harus menggunakan [] untuk mendapatkan nilai} else {// untuk non -e return window.getComputedStyle (obj, false) [attr]; }} /* Dapatkan atau atur atribut css* / fungsi css (obj, attr, value) {if (arguments.length == 2) {return getstyle (obj, attr); } else {obj.style [attr] = value; }} </script>5.window.getComputedStyle (ele [, pseudoelt]);
Jika parameter kedua adalah nol atau dihilangkan, dapatkan objek cssstyledeclaration yaitu ele
Jika itu adalah kelas pseudo, objek cssstyledeclaration dari kelas semu diperoleh
<tyle> div {lebar: 200px; Tinggi: 200px; Latar Belakang-Color:#FC9; font-size: 20px; Teks-Align: tengah; } Div: After {Content: "This is After"; Tampilan: Blok; Lebar: 100px; Tinggi: 100px; Latar Belakang-Color:#F93; margin: 0 otomatis; Line-Height: 50px; } </style> <body> <v id = 'myDiv'> Ini adalah div </div> <input id = 'btn' type = "tombol" value = 'getstyle'/> <script> var btn = document.queryselector ('#btn'); btn.onClick = function () {var div = document.queryselector ('#myDiv'); var styleObj = window.getComputedStyle (div, 'after'); console.log (styleobj ['width']); } </script> </body>6.GetPropertyValue Mendapat nilai properti yang ditentukan dalam objek cssstyledeclaration
<script> var div = document.geteLementsbyTagname ("div") [0]; var styleobj = window.getComputedStyle (div, null); console.log (styleobj.getPropertyValue ("latar belakang-warna")); </script>PropertiDyName di getPropertyValue (PropertiDyName); tidak bisa ekspresi unta
Obj.Currentstyle ['margin-left'] bekerja
OBJ.CurrentStyle ['marginleft'] bekerja
window.getComputedStyle (obj, null) ['margin-left'] berfungsi
window.getComputedStyle (obj, null) ['marginleft'] berfungsi
window.getComputedStyle (obj, null) .getPropertyValue ('margin-left') valid
window.getComputedStyle (obj, null) .getPropertyValue ('marginleft') tidak valid
obj.currentstyle.width valid
obj.currentstyle.background-color tidak valid
OBJ.CURRENTSTYLE.BackgroundColor Works
window.getComputedStyle (obj, null) .width valid
window.getComputedStyle (obj, null) .Background-color tidak valid
window.getComputedStyle (OBJ, NULL) .BackgroundColor Works
Singkatnya, atribut dengan "-" tidak dapat ditunjukkan secara langsung, jadi ada metode GetPropertyValue untuk menanganinya, tetapi [] dapat digunakan untuk menggantikan GetPropertyValue.
7. DefaultView
Dalam banyak kode demo online, GetComputedStyle dipanggil melalui objek Document.DefaultView. Dalam kebanyakan kasus, ini tidak diperlukan, karena dapat dipanggil langsung melalui objek jendela. Tetapi ada situasi di mana Anda harus menggunakan DefaultView, yaitu untuk mengakses gaya di dalam subframe di firefox3.6 (iframe)
Metode implementasi sederhana di atas untuk mendapatkan gaya (disarankan) dari JS adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.