Konwertowanie na px w Javascript (i uzyskanie domyślnego rozmiaru czcionki)

Są sytuacje, w których przydatne może być uzyskanie dokładnej szerokości pikselaem pomiary. Na przykład załóżmy, że masz element z właściwością CSS (np. Obramowanie lub dopełnienie), który jest mierzony w ems, i musisz uzyskać dokładną szerokość piksela obramowania lub dopełnienia. Istnieje istniejące pytanie, które dotyka tego tematu:

Jak mogę uzyskać domyślny rozmiar czcionki w pikselach za pomocą JavaScript lub JQuery?

To pytanie prosi o uzyskaniedomyślny rozmiar czcionki - co jest niezbędne do przekształcenia krewnegoem wartość do dokładnejpx wartość.

Ta odpowiedź ma całkiem dobre wyjaśnienie, jak uzyskać domyślny rozmiar czcionki elementu:

Ponieważ ems mierzy szerokość, zawsze możesz obliczyć dokładny rozmiar czcionki w pikselach, tworząc div o długości 1000 ems i dzieląc jego właściwość client-Width na 1000. Wydaje mi się, że przypominam sobie ems są obcinane do najbliższej tysięcznej, więc potrzebujesz 1000 ems do unikać błędnego obcinania wyniku pikseli.

Używając tej odpowiedzi jako przewodnika, napisałem następującą funkcję, aby uzyskać domyślny rozmiar czcionki:

<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>

Po ustawieniu domyślnego rozmiaru czcionki możesz przekonwertować dowolnyem szerokość dopx szerokość, mnożąc ems przez domyślny rozmiar czcionki elementu i zaokrąglając wynik:

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

Problem: ThegetDefaultFontSize idealnie ma być prostą funkcją wolną od efektów ubocznych, która zwraca domyślny rozmiar czcionki. Ale toROBI mieć niefortunny efekt uboczny: modyfikuje DOM! Dołącza dziecko, a następnie usuwa dziecko. Dołączenie dziecka jest konieczne, aby uzyskać ważnośćoffsetWidth własność. Jeśli nie dołączasz dzieckadiv do DOM,offsetWidth właściwość pozostaje na 0, ponieważ element nigdy nie jest renderowany. Nawet jeśli natychmiast usuniemy element potomny, ta funkcja może nadal powodować niezamierzone skutki uboczne, takie jak wystrzelenie zdarzenia (np. Internet Exploreronpropertychange lub W3C'sDOMSubtreeModified zdarzenie), które nasłuchiwało na elemencie macierzystym.

Pytanie: Czy jest jakiś sposób, by napisać naprawdę efekt ubocznygetDefaultFontSize() funkcja, która przypadkowo nie uruchomi obsługi zdarzeń lub wywoła inne niezamierzone skutki uboczne?

questionAnswers(4)

yourAnswerToTheQuestion