Elemen semu CSS sangat kuat dan sering digunakan untuk membuat petunjuk segitiga CSS. Menggunakan CSS Pseudo-Elements dapat mencapai beberapa efek sederhana tanpa perlu menambahkan tag HTML tambahan. Satu hal adalah bahwa JavaScript tidak bisa mendapatkan nilai atribut CSS ini, tetapi sekarang ada cara untuk mendapatkan:
Lihatlah kode CSS berikut:
.element: sebelum {konten: 'baru'; Warna: RGB (255, 0, 0);}. Elemen: Sebelum {konten: 'baru'; warna: rgb (255, 0, 0);}Untuk mendapatkan atribut warna .Element: Sebelumnya, Anda dapat menggunakan kode berikut:
var color = window.getComputedStyle (document.queryselector ('. elemen'), ': sebelum'). getPropertyValue ('color') var color = window.getComputedstyle (document.queryselector ('. elemen'), ': Sebelum'). GetPropertyValue ('color'))Lewati elemen pseudo sebagai parameter kedua ke metode window.getComputedStyle untuk mendapatkan atribut CSS-nya. Masukkan kode ini ke dalam set fungsi alat Anda. Metode ini akan berguna karena elemen semu didukung oleh semakin banyak browser.
Catatan Penerjemah: Metode Window.getComputedStyle tidak didukung di browser di bawah IE9, dan GetPropertyValue harus digunakan dengan metode GetComputedStyle. IE mendukung atribut CurrentStyle, tetapi masih tidak dapat memperoleh sifat elemen pseudo.
Metode untuk secara akurat mendapatkan nilai atribut CSS dari elemen yang ditentukan.
<script type = "text/javascript"> function getStyle (elem, name) {// Jika properti ada dalam gaya [], baru -baru ini diatur (dan yang saat ini) if (elem.style [name]) {return elem.style [name]; } // sebaliknya, coba lagi jika (elem.currentstyle) {return elem.currentstyle [name]; } // atau metode W3C, jika ada yang lain jika (document.defaultview && document.defaultview.getComputedStyle) {// menggunakan metode penulisan reguler "Text-Align" tradisional, daripada "TextAlign" name = name.replace (/(AZ])/G, "-$ 1"); name = name.tolowercase (); // Dapatkan objek gaya dan dapatkan nilai properti (jika ada) var s = document.defaultview.getComputedStyle (elem, ""); return s && s.getPropertyValue (name); // jika tidak, menggunakan browser lain} else {return null; }} </script>