em/ex <-> px

[molily]

Hallo,

Man nehme: ein Element, dessen Breite in em angegeben ist.
Man experimentiere etwas mit dem Umrechnungsfaktor für die verschiedenen IE-Versionen: var v = document.compatMode ? 10.44 : 11.8;
Man rechne die Breite (hier des Menüs) um: var em = v / document.getElementById("imenu").offsetWidth;
;-)

Guter Ansatz, ich habe das einmal ähnlich gelöst:

  
function max_width_internet_explorer () {  
 var max_width_ids = ["e"];  
 var root, cs, fontsize_string, fontsize;  
 if (  
  !document.getElementById ||  
  !(root = document.documentElement) ||  
  !(root.currentStyle) ||  
  !(fontsize_string = root.currentStyle.fontSize) ||  
  fontsize_string.substr(fontsize_string.length - 2) != "pt"  
 )  
  return;  
 fontsize = parseInt(fontsize_string);  
 var one_em_in_pt_string = root.currentStyle.fontSize;  
 var one_em_in_pt = parseInt(one_em_in_pt_string);  
 var pt_in_px_factor = 4 / 3;  
 window.one_em_in_px = one_em_in_pt * pt_in_px_factor;  
  
 var elem, max_width_em_string, max_width_em, max_width_px;  
 for (var ids_index = 0; ids_index < max_width_ids.length; ids_index++) {  
  elem = document.getElementById(max_width_ids[ids_index]);  
  if (  
   elem.currentStyle.maxWidth ||  
   !(max_width_em_string = elem.currentStyle["max-width"])  
  )  
   return;  
  max_width_em = parseInt(max_width_em_string);  
  max_width_px = one_em_in_px * max_width_em;  
  if (elem.offsetWidth > max_width_px) {  
   elem.style.width = max_width_px;  
  } else {  
   elem.style.width = "auto";  
  }  
  // alert("max_width_px: " + max_width_px + "\n" + "one_em_in_px: " + one_em_in_px);  
 }  
};  

Ich gehe also über document.documentElement.currentStyle.fontSize, in etwa wie auf http://www.svendtofte.com/code/max_width_in_ie/ beschrieben. Das ist im IE 6 standardmäßig »12pt«. 1em ist also 12pt. Den Wert rechne ich in Pixel um, der Faktor ist 4 zu 3 (das ist 96ppi soweit ich weiß). Dann habe ich den gesuchten Wert »Wieviel Pixel ist ein em?«. Dementsprechend werden ein paar Elemente mit max-width angesprochen, der CSS-Wert wird automatisch ausgelesen und es wird gegebenenfalls die width-Eigenschaft vergeben.

Ich nutze das allerdings nicht in der Praxis, das war einmal eine »Studie«. Verschiedene Umrechnungsfaktoren habe ich nicht berücksichtigt.

Mathias