[Javascript/DHTML] Probleem met bepalen offsetWidth in IE - Softwareontwikkeling

vrijdag 14 januari 2005 21:02

Acties:

Verwijderd

Topicstarter

Onderstaande html-code maakt een tabel aan. Voor het voorbeeld heb ik slecht één kolom opgenomen, en twee rijen. In de bovenste cel van de tabel staan een multi-select box. In de onderste cel komt een text-input box.

Aangezien de text-box in de onderste cel EXACT even breed moet worden als de select-box, waarvan ik vooraf de grootte niet weet, gebruik ik javascript om de grootte van de selectbox te achterhalen. Vervolgens laat ik het javascriptje de html-code voor de text-box genereren, waarin de juiste grootte in pixels vermeld staat.

Deze code werkt goed in Mozilla en in Opera, in Internet Explorer NIET. De 'alert(propval)' geeft een waarde terug van 0. Echter, wanneer ik de text-box BUITEN de tabel plaats waar de select-box instaat, dan kan IE de breedte van de select-box ineens wél bepalen, en retourneert alert(propval) netjes de breedte van de select-box. Dit is het geval wanneer de commentaartekens in de regel '' weggehaald worden.

Zie ik hier iets over het hoofd, of is dit een bug in IE ?? Nogmaals: in Mozilla en in Opera werkt dit probleemloos...

code:

<HTML>
<BODY>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function getProp(el,styleProp)
{
    var x = document.getElementById(el);
  var propval = eval('x.'+styleProp);
  document.write('<input type="text" style="width: '+propval+'">');
  alert(propval);
}
//-->
</SCRIPT>
<TABLE BORDER=1>
  <TR>
    <TD>
      <SELECT id="selectbox" MULTIPLE>
      <OPTION>Een
      <OPTION>Twee
      <OPTION>Drie
      <OPTION>Vier
      </SELECT>
    </TD>
  </TR>
  <!-- </TABLE><TABLE BORDER=1> -->
  <TR>
    <TD>
      <SCRIPT type="text/javascript"><!--
        getProp('selectbox','offsetWidth'); 
        -->
      </SCRIPT>
    </TD>
  </TR>
</TABLE>

</BODY>
</HTML>

[ Voor 13% gewijzigd door Verwijderd op 14-01-2005 21:15 ]

vrijdag 14 januari 2005 22:48

Acties:

crisp

Devver

Pixelated

IE begint pas met renderen na de /table
Een alternatief is natuurlijk geen tabel gebruiken; hoogstwaarschijnlijk kan het prima zonder

overigens is de eval ranzig en overbodig:

JavaScript:

1	var propval = document.getElementById(el)[styleProp];

[ Voor 24% gewijzigd door crisp op 14-01-2005 22:49 ]

Intentionally left blank

Reageer