Elemanlar stillerini değiştirmek kolaydır, ancak değeri okumak biraz zordur.
Javascript'te getComputedStyle yerleşik yöntem çağrısını kullanmadığınız sürece JavaScript, css'den (dahili / harici) gelen herhangi bir öğe stili özelliğini (elem.style) okuyamaz.
getComputedStyle (öğe [, sözde])
Öğe: Değerinin okunacağı öğe.
sözde: Gerekirse sözde öğe, örneğin :: önce. Boş bir dize veya hiçbir bağımsız değişken, öğenin kendisi anlamına gelir.
Sonuç, elem.style gibi stil özelliklerine sahip, ancak şimdi tüm css sınıflarına göre bir nesnedir.
Örneğin, burada stil kenar boşluğunu görmez:
<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>
Böylece javaScript kodunuzu, genişliğini / yüksekliğini veya başka bir özelliğini almak istediğiniz öğenin getComputedStyle'sini içerecek şekilde değiştirdi
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);
}
}
Hesaplanmış ve çözülmüş değerler
CSS'de iki kavram vardır:
Hesaplanan stil değeri, CSS kademesinin sonucu olarak tüm CSS kuralları ve CSS devralma uygulandıktan sonraki değerdir. Yükseklik gibi görünebilir: 1em veya yazı tipi boyutu:% 125.
Çözülmüş bir stil değeri, öğeye nihayet uygulanan değerdir. 1em veya% 125 gibi değerler görecelidir. Tarayıcı hesaplanan değeri alır ve tüm birimleri sabit ve mutlak yapar, örneğin: yükseklik: 20 piksel veya yazı tipi boyutu: 16 piksel. Geometri özellikleri için, çözülen değerler genişlik gibi bir kayan noktaya sahip olabilir: 50.5 piksel.
Hesaplanan değerleri almak için uzun zaman önce getComputedStyle oluşturuldu, ancak çözülen değerlerin çok daha kullanışlı olduğu ve standardın değiştiği ortaya çıktı.
Yani bugünlerde getComputedStyle aslında özelliğin çözümlenmiş değerini döndürür.
Lütfen aklınızda bulundurun:
getComputedStyle tam özellik adını gerektirir
Her zaman, paddingLeft veya height veya width gibi tam olarak istediğiniz özelliği istemelisiniz. Aksi takdirde doğru sonuç garanti edilmez.
Örneğin, paddingLeft / paddingTop özellikleri varsa, getComputedStyle (elem) .padding için ne almalıyız? Bilinen dolgulardan hiçbir şey mi yoksa “üretilen” bir değer mi? Burada standart bir kural yok.
Başka tutarsızlıklar da var. Örnek olarak, bazı tarayıcılar (Chrome) aşağıdaki belgede 10 piksel gösterir ve bazıları (Firefox) - şunları yapmaz:
<style>
body {
margin: 30px;
height: 900px;
}
</style>
<script>
let style = getComputedStyle(document.body);
alert(style.margin); // empty string in Firefox
</script>
daha fazla bilgi için https://javascript.info/styles-and-classes