Sangat mudah untuk memodifikasi gaya elemen tetapi agak sulit untuk membaca nilainya.
JavaScript tidak dapat membaca properti gaya elemen (elem.style) yang berasal dari css (internal / eksternal) kecuali Anda menggunakan metode panggilan internal getComputedStyle di javascript.
getComputedStyle (elemen [, pseudo])
Elemen: Elemen untuk membaca nilai untuk.
pseudo: Elemen pseudo jika diperlukan, misalnya :: sebelumnya. String kosong atau tanpa argumen berarti elemen itu sendiri.
Hasilnya adalah objek dengan properti style, seperti elem.style, tapi sekarang dengan memperhatikan semua kelas css.
Misalnya, di sini style tidak melihat margin:
<head>
<style> body { color: red; margin: 5px } </style>
</head>
<body>
<script>
let computedStyle = getComputedStyle(document.body);
// now we can read the margin and the color from it
alert( computedStyle.marginTop ); // 5px
alert( computedStyle.color ); // rgb(255, 0, 0)
</script>
</body>
Jadi modifikasi kode javaScript Anda untuk memasukkan getComputedStyle dari elemen yang ingin Anda dapatkan lebar / tinggi atau atribut lainnya
window.onload = function() {
var test = document.getElementById("test");
test.addEventListener("click", select);
function select(e) {
var elementID = e.target.id;
var element = document.getElementById(elementID);
let computedStyle = getComputedStyle(element);
var width = computedStyle.width;
console.log(element);
console.log(width);
}
}
Nilai yang dihitung dan diselesaikan
Ada dua konsep dalam CSS:
Nilai gaya terkomputasi adalah nilai setelah semua aturan CSS dan pewarisan CSS diterapkan, sebagai hasil dari kaskade CSS. Ini bisa terlihat seperti tinggi: 1em atau ukuran font: 125%.
Nilai gaya yang diselesaikan adalah yang akhirnya diterapkan ke elemen. Nilai-nilai seperti 1em atau 125% adalah relatif. Browser mengambil nilai yang dihitung dan membuat semua unit tetap dan absolut, misalnya: tinggi: 20px atau ukuran font: 16px. Untuk properti geometri, nilai yang diselesaikan mungkin memiliki titik apung, seperti lebar: 50,5px.
Dulu getComputedStyle telah dibuat untuk mendapatkan nilai yang dihitung, tetapi ternyata nilai yang diselesaikan jauh lebih nyaman, dan standar berubah.
Jadi saat ini getComputedStyle benar-benar mengembalikan nilai yang diselesaikan dari properti.
Tolong dicatat:
getComputedStyle membutuhkan nama properti lengkap
Anda harus selalu menanyakan properti yang Anda inginkan, seperti paddingLeft atau tinggi atau lebar. Kalau tidak, hasil yang benar tidak dijamin.
Misalnya, jika ada properti paddingLeft / paddingTop, lalu apa yang harus kita dapatkan untuk getComputedStyle (elem) .padding? Tidak ada, atau mungkin nilai "yang dihasilkan" dari paddings yang dikenal? Tidak ada aturan standar di sini.
Ada ketidakkonsistenan lain. Sebagai contoh, beberapa browser (Chrome) menunjukkan 10px pada dokumen di bawah ini, dan beberapa di antaranya (Firefox) - jangan:
<style>
body {
margin: 30px;
height: 900px;
}
</style>
<script>
let style = getComputedStyle(document.body);
alert(style.margin); // empty string in Firefox
</script>
untuk informasi lebih lanjut https://javascript.info/styles-and-classes