Breite eines Elementes bestimmen, welches auf display:none steht

[Christian S.]

Hallo,

ich habe ein Element, welches entweder selber auf display:none steht oder durch die display:none Angabe in einem Elternelement nicht angezeigt wird.

Jedoch muss ich die Breite dieses Elementes bestimmen, für den Fall, falls es plötzlich doch angezeigt wird (durch JavaScript).

Normalerweise arbeite ich da mit offsetWidth, doch das ist leider 0, wenn das Element nicht angezeigt wird.

Gibt es andere Möglichkeiten?

Ich hatte schon die Idee, das Element temporär an den Body zu hängen (appendChild), dann die Breite zu bestimmen, dann wieder zurückzuhängen. Nur leider ist das nicht wirklich zuverlässig, da ja verschiedene CSS Styles für verschiedenene Elemente angewandt werden könnten.

Gruß!

[hugger]

Stelle das Element doch einfach auf display:block. Dann positionierst du es noch im Niemandsland und kannst wunderbar damit arbeiten ohne dass man es sieht.

[Christian S.]

Stelle das Element doch einfach auf display:block. Dann positionierst du es noch im Niemandsland und kannst wunderbar damit arbeiten ohne dass man es sieht.

Ja, das Problem ist eben, wenn IRGENDEIN Elternelement auf display:none steht, dass dann das eigentliche Element eben auch nicht angezeigt wird.

Selbst wenn ich es dann explizit auf display:block stelle. Das Elternelement hat recht (wie auch im richtigen Leben ;-)) und lässt es unsichtbar, und somit bleibt offsetWidth == 0.

Hänge ich es wie gesagt an den Body (dieser wird wohl immer sichtbar sein), dann kann es sein, dass die Breite verfälscht ist, da z.B. der Rahmen/Padding/Margin usw. anders sind, als sonst.

Gruß!

[suit]

Selbst wenn ich es dann explizit auf display:block stelle. Das Elternelement hat recht (wie auch im richtigen Leben ;-)) und lässt es unsichtbar, und somit bleibt offsetWidth == 0.

Warum verschiebst du nicht einfach das Elternelement inklusiver seiner Kinder ins Nirvana?

Hänge ich es wie gesagt an den Body (dieser wird wohl immer sichtbar sein), dann kann es sein, dass die Breite verfälscht ist, da z.B. der Rahmen/Padding/Margin usw. anders sind, als sonst.

Wieso sollte es verfälscht sein?

[suit]

Gibt es andere Möglichkeiten?

Anstatt das Element auszublenden kannst du es an einer Stelle anzeigen wo es niemanden stört.

element {  
  position: absolute;  
  left: -100000px;  
  top:  0;  
}