Es ist einfach, die Elementstile zu ändern, aber es ist etwas schwierig, den Wert zu lesen.
JavaScript kann keine Elementstileigenschaft (elem.style) lesen, die von CSS (intern / extern) stammt, es sei denn, Sie verwenden den integrierten Methodenaufruf getComputedStyle in Javascript.
getComputedStyle (Element [, Pseudo])
Element: Das Element, für das der Wert gelesen werden soll.
pseudo: Ein Pseudoelement, falls erforderlich, zum Beispiel :: before. Eine leere Zeichenfolge oder kein Argument bedeutet das Element selbst.
Das Ergebnis ist ein Objekt mit Stileigenschaften wie elem.style, jetzt jedoch in Bezug auf alle CSS-Klassen.
Zum Beispiel sieht der Stil hier nicht den Rand:
<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>
Ändern Sie daher Ihren JavaScript-Code so, dass er den getComputedStyle des Elements enthält, dessen Breite / Höhe oder ein anderes Attribut Sie erhalten möchten
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);
}
}
Berechnete und aufgelöste Werte
In CSS gibt es zwei Konzepte:
Ein berechneter Stilwert ist der Wert, nachdem alle CSS-Regeln und die CSS-Vererbung als Ergebnis der CSS-Kaskade angewendet wurden. Es kann aussehen wie Höhe: 1em oder Schriftgröße: 125%.
Ein aufgelöster Stilwert ist derjenige, der schließlich auf das Element angewendet wird. Werte wie 1em oder 125% sind relativ. Der Browser nimmt den berechneten Wert und macht alle Einheiten fest und absolut, zum Beispiel: Höhe: 20px oder Schriftgröße: 16px. Für Geometrieeigenschaften können aufgelöste Werte einen Gleitkomma haben, z. B. Breite: 50,5 Pixel.
Vor langer Zeit wurde getComputedStyle erstellt, um berechnete Werte abzurufen. Es stellte sich jedoch heraus, dass aufgelöste Werte viel praktischer sind, und der Standard wurde geändert.
Heutzutage gibt getComputedStyle den aufgelösten Wert der Eigenschaft zurück.
Bitte beachten Sie:
getComputedStyle benötigt den vollständigen Eigenschaftsnamen
Sie sollten immer nach der genauen Eigenschaft fragen, die Sie möchten, z. B. paddingLeft oder height oder width. Andernfalls kann das korrekte Ergebnis nicht garantiert werden.
Wenn es beispielsweise Eigenschaften paddingLeft / paddingTop gibt, was sollten wir dann für getComputedStyle (elem) .padding erhalten? Nichts oder vielleicht ein "generierter" Wert aus bekannten Polstern? Hier gibt es keine Standardregel.
Es gibt andere Inkonsistenzen. Einige Browser (Chrome) zeigen im folgenden Dokument beispielsweise 10 Pixel an, andere (Firefox) - nicht:
<style>
body {
margin: 30px;
height: 900px;
}
</style>
<script>
let style = getComputedStyle(document.body);
alert(style.margin); // empty string in Firefox
</script>
Weitere Informationen finden Sie unter https://javascript.info/styles-and-classes