Angenommen, ich habe eine <div> die ich in der Anzeige des Browsers (Viewport) zentrieren möchte. Zu diesem Zweck muss ich die Breite und Höhe des <div> Element.
Was soll ich verwenden? Bitte fügen Sie Informationen zur Browser-Kompatibilität bei.
Es ist einfach, die Stile der Elemente zu ändern, aber etwas schwierig, den Wert zu lesen.
JavaScript kann keine Elementstileigenschaft (elem.style) lesen, die von css (intern/extern) kommt, es sei denn, Sie verwenden den eingebauten Methodenaufruf getComputedStyle in javascript.
getComputedStyle(element[, pseudo])
Element: Das Element, für das der Wert gelesen werden soll.
pseudo: Ein Pseudo-Element, falls erforderlich, z. B. ::before. Ein leerer String oder kein Argument bedeutet das Element selbst.
Das Ergebnis ist ein Objekt mit Stileigenschaften, wie elem.style, aber jetzt mit Bezug auf alle CSS-Klassen.
Hier zum Beispiel sieht der Stil den Rand nicht:
<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 also Ihren JavaScript-Code so, dass er den getComputedStyle des Elements enthält, dessen Breite/Höhe oder andere Attribute Sie abrufen 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 nach allen CSS-Regeln und CSS Vererbung angewendet wurde, als Ergebnis der CSS-Kaskade. Er kann aussehen aussehen wie height:1em oder font-size: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: height:20px oder font-size:16px. Bei Geometrieeigenschaften können aufgelöste Werte können einen Gleitpunkt haben, wie width:50.5px.
Vor langer Zeit wurde getComputedStyle geschaffen, um berechnete Werte zu erhalten, aber es stellte sich heraus, dass aufgelöste Werte viel bequemer sind, und der Standard wurde geändert.
Heutzutage gibt getComputedStyle also tatsächlich den aufgelösten Wert der Eigenschaft zurück.
Bitte beachten:
getComputedStyle erfordert den vollständigen Eigenschaftsnamen
Sie sollten immer nach der genauen Eigenschaft fragen, die Sie wünschen, wie paddingLeft oder height oder width. Andernfalls ist das richtige Ergebnis nicht garantiert.
Wenn zum Beispiel die Eigenschaften paddingLeft/paddingTop vorhanden sind, dann was sollten wir für getComputedStyle(elem).padding erhalten? Nichts, oder vielleicht einen "generierten" Wert aus bekannten Auffüllungen? Es gibt keine Standard Regel hier.
Es gibt noch weitere Ungereimtheiten. Als Beispiel, einige Browser (Chrome) zeigen 10px in dem Dokument unten, und einige von ihnen (Firefox) - nicht:
<style>
body {
margin: 30px;
height: 900px;
}
</style>
<script>
let style = getComputedStyle(document.body);
alert(style.margin); // empty string in Firefox
</script>für weitere Informationen https://javascript.info/styles-and-classes
Sie müssen es nur für IE7 und älter berechnen (und nur, wenn Ihr Inhalt keine feste Größe hat). Ich schlage vor, bedingte HTML-Kommentare zu verwenden, um den Hack auf alte IEs zu beschränken, die CSS2 nicht unterstützen. Für alle anderen Browser verwenden Sie dies:
<style type="text/css">
html,body {display:table; height:100%;width:100%;margin:0;padding:0;}
body {display:table-cell; vertical-align:middle;}
div {display:table; margin:0 auto; background:red;}
</style>
<body><div>test<br>test</div></body>Dies ist die perfekte Lösung. Sie zentriert <div> in beliebiger Größe und schrumpft es auf die Größe seines Inhalts.
Element.offsetWidth und element.offsetHeight sollten genügen, wie im vorherigen Beitrag vorgeschlagen.
Wenn Sie jedoch nur den Inhalt zentrieren wollen, gibt es eine bessere Möglichkeit, dies zu tun. Angenommen, Sie verwenden xhtml strict DOCTYPE. Setzen Sie die Eigenschaft margin:0,auto und die erforderliche Breite in px auf den body-Tag. Der Inhalt wird mittig auf der Seite ausgerichtet.
Hmm, funktioniert in Chrome und IE9, scheint aber in Firefox nicht zu funktionieren. Funktioniert es nur bei bestimmten Dokumenttypen?
PixelHeight war eine Erfindung des Internet Explorer, die nicht mehr verwendet werden sollte stackoverflow.com/q/17405066/2194590
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
18 Stimmen
Beachten Sie, dass die Höhe eines Elements durch jede Methode hat immer eine Performance-Auswirkungen da er den Browser dazu bringt, die Position aller Elemente auf der Seite neu zu berechnen (Reflow). Vermeiden Sie es daher, dies zu oft zu tun. Zur Kasse diese Liste was für Dinge einen Reflow auslösen.