Es gibt Situationen, in denen es nützlich sein kann, die genaue Pixelbreite von a zu ermittelnem Messung. Angenommen, Sie haben ein Element mit einer CSS-Eigenschaft (wie border oder padding), die in ems gemessen wird, und Sie müssen die genaue Pixelbreite des Rahmens oder des Auffüllens ermitteln. Es gibt eine Frage, die dieses Thema berührt:

Wie kann ich mithilfe von JavaScript oder JQuery die Standardschriftgröße in Pixel ermitteln?

Bei dieser Frage geht es darum, das zu bekommenStandardschriftgröße - was notwendig ist, um einen Verwandten zu konvertierenem Wert auf ein genauespx Wert.

Diese Antwort hat eine ziemlich gute Erklärung, wie man die Standardschriftgröße eines Elements ermittelt:

Da ems die Breite misst, können Sie immer die exakte Pixel-Schriftgröße berechnen, indem Sie ein div erstellen, das 1000 ems lang ist, und die client-Width-Eigenschaft durch 1000 dividieren. Ich scheine mich daran zu erinnern, dass ems auf das nächste Tausendstel abgeschnitten sind Vermeiden Sie ein fehlerhaftes Abschneiden des Pixelergebnisses.

Ausgehend von dieser Antwort habe ich die folgende Funktion geschrieben, um die Standardschriftgröße zu erhalten:

<code>function getDefaultFontSize(parentElement)
{
    parentElement = parentElement || document.body;
    var div = document.createElement('div');
    div.style.width = "1000em";
    parentElement.appendChild(div);
    var pixels = div.offsetWidth / 1000;
    parentElement.removeChild(div);
    return pixels;
}
</code>

Sobald Sie die Standardschriftgröße haben, können Sie jede konvertierenem Breite bispx Breite durch einfaches Multiplizieren der ems mit der Standardschriftgröße des Elements und Abrunden des Ergebnisses:

Math.round(ems * getDefaultFontSize(element.parentNode))

Problem: DasgetDefaultFontSize ist idealerweise eine einfache, nebenwirkungsfreie Funktion, die die Standardschriftgröße zurückgibt. Aber esTUT haben eine unglückliche Nebenwirkung: es verändert das DOM! Es hängt ein Kind an und entfernt dann das Kind. Das Kind anzufügen ist notwendig, um eine gültige zu bekommenoffsetWidth Eigentum. Wenn Sie das Kind nicht anhängendiv zum DOM, demoffsetWidth Eigenschaft bleibt bei 0, da das Element nie gerendert wird. Auch wenn wir das untergeordnete Element sofort entfernen, kann diese Funktion dennoch unbeabsichtigte Nebenwirkungen hervorrufen, z. B. das Auslösen eines Ereignisses (z. B. Internet Explorer)onpropertychange oder W3C'sDOMSubtreeModified Ereignis), das das übergeordnete Element abgehört hat.

Frage: Gibt es eine Möglichkeit, einen wirklich nebenwirkungsfreien Effekt zu schreiben?getDefaultFontSize() Funktion, die nicht versehentlich Ereignishandler auslöst oder andere unbeabsichtigte Nebenwirkungen verursacht?