CSS-width-Attribut per JavaScript auslesen

T

Thomas D

Erfahrenes Mitglied
Hallo!

Ich bin derzeit beim Entwickeln einer Bildergalerie. Dabei habe ich das Problem, dass ich solange Graphiken in eine Zeile einfügen möchte, solange Platz ist - sprich: kein horizontaler Scrollbalken. Ich habe mir gedacht, die Größe des Fenster durch JavaScript abzufragen und dies mit der Breite der Bilder zu vergleichen. Jetzt habe ich aber das Problem, dass die folgende Anweisung mir nichts zurück liefert:

Code: 
document.getElementById('content').style.width;

Auch der Zugriff ohne die CSS-Eigenschaft, die gesetzt ist, funktioniert nicht. Ich wäre an einer dynamischen Lösung interessiert, sodass die Einteilung der Bilder auch dann noch funktioniert, wenn die Breite per CSS verkleinert oder vergrößert wird. Wenn jemand eine Lösung dieses Problems oder Alternativvorschläge hat, nur her damit ;-) ...

MfG, Thomas D.
 
Hi,

versuch es mal mit der Eigenschaft offsetWidth.
Code: 
document.getElementById('content').offsetWidth
Ciao
Quaese
 
Super, es funktioniert ;-)! Hvala lepa!

Es bleibt doch leider eine Frage offen: Im Firefox hat alles so funktioniert, wie es sollte. Im Opera wird der Text in Verbindung mit dem Bild allerdings anders dargestellt. Somit würde ich gerne die Breite eines <td>-Tags auslesen, um beiden Browsern zur Genüge tun. Allerdings funktioniert weder

Code: 
alert (td.width);

noch

Code: 
alert (td.offsetWidth);

Wie kriege ich das hin :confused:
 
Hi,

wenn ich die Tabellenzelle über eine ID anspreche, funktioniert es bei mit im IE6, FF1.5 und Opera 9.
Code: 
<table>
	<tr>
	 <td id="td_id">Hallo, wie breit bin ich?</td>
	 <td><button onclick="alert(document.getElementById('td_id').offsetWidth);">Antwort</button></td>
	</tr>
</table>
Ciao
Quaese
 
Stimmt, wenn ich das so wie du schreibe, dann geht's auch. Blöderweise erzeuge ich die Tabelle dynamisch zur Laufzeit:

Code: 
var table = document.getElementById ("galerieCont");
var c, tr, td, img;

while (table.firstChild != null) //bisherigen Inhalt löschen
	table.removeChild (table.firstChild);

var ordnername, screenWidth = document.getElementById('content').offsetWidth;
var platz = 0;

tr = document.createElement ("tr");
for (ordnername in Bildinfos)
{
	platz += folderImg.width;
	if (platz >= screenWidth) //neue Zeile, da kein Platz mehr
	{
		table.appendChild (tr);
		tr = document.createElement ("tr");
		platz = 0;		
	}
	
	td = document.createElement ("td");
	img = document.createElement ("img");
	img.setAttribute ("src", folderImg.src);
	//img.setAttribute ("onMouseOver", "alert ('Hallo');");
	
	td.appendChild (img);
	td.appendChild (document.createTextNode (ordnername));
	tr.appendChild (td);
	alert (td.offsetWidth); //liefert leider stets 0
}
table.appendChild (tr);

In Firefox geht's, da hier die Breite des img-Tags von belang ist. Bei Opera kommt's aber scheinbar auf beides an. Interessanter Nebenaspekt: Im IE geht das Script gar nicht :( - woran könnte denn das liegen und gibt es eine Alternative wie ich die Breite des <td>-Tags auf dann auslesen kann, wenn ich es zur Laufzeit erzeuge?

Thx, Thomas D.
 
Hi,

offensichtlich kann die Breite über offsetWidth erst ermittelt werden, wenn die Tabelle in den Dokumentenbaum
eingebunden wurde.

Vielleicht hilft Dir folgender Workaround weiter.
  1. Erstelle zunächst eine Tabelle, in der alle Zellen in einer Zeile eingebunden werden.
  2. Jede Zelle bekommt eine ID, anhand derer sie später wieder identifiziert werden kann
  3. Es wird ein verstecktes DIV erstellt.
  4. Dieses DIV nimmt die Tabelle auf und wird ins Dokument eingebunden.
  5. Jetzt wird die eigentliche Tabelle erstellt, indem die IDs der zuvor erstellten Zellen durchlaufen werden.
  6. Zu jeder Zelle wird die Breite ermittelt und bei erreichtem Maximum eine neue Zeile in der Zieltabelle angelegt.
  7. Zum Schluss wird die Workaround-Tabelle wieder gelöscht und die Zieltabelle ins Dokument geschrieben.
Der Quellcode könnte folgendermassen aussehen:
Code: 
<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
  <!--
var arrBilder = new Array();
arrBilder[0] = new Image();
arrBilder[0].src = "../bilder/fussball1.jpg";
arrBilder[0].txt = "Text";
arrBilder[1] = new Image();
arrBilder[1].src = "../bilder/fussball2.jpg";
arrBilder[1].txt = "Ich bin der ellenlange Text zum Bild und so weiter und so weiter";
arrBilder[2] = new Image();
arrBilder[2].src = "../bilder/fussball3.jpg";
arrBilder[2].txt = "Noch Text";

var intScrWidth = 200; // Breite, ab der umgebrochen wird

function dieFunktion(){
  var arrIDs = new Array();

  /* Workaround-Tabelle aufbauen und in Dokument einhängen (versteckt) */
  var objTable = document.createElement("table");
  var objTBody = document.createElement("tbody");
  var objTR = document.createElement("tr");

  for(entry in arrBilder){
    var objImg = document.createElement("img");
    objImg.src = arrBilder[entry].src;
    var objTD = document.createElement("td");
    // Hilfs-ID in Zelle schreiben
    objTD.id = "workaround_" + entry;
    // ID in Hilfsarray sichern
    arrIDs[arrIDs.length] = "workaround_" + entry;
    // Bild und Text in Zelle einbinden
    objTD.appendChild(objImg);
    objTD.appendChild(document.createTextNode(arrBilder[entry].txt));
    // Zelle einhängen
    objTR.appendChild(objTD);
  }
  // Zeile und TBody einhängen
  objTBody.appendChild(objTR);
  objTable.appendChild(objTBody);

  // Verstecktes DIV erstellen, Tabelle darin einbetten und das ganze Konstrukt in Dokument einbinden
  var objDiv = document.createElement("div");
  objDiv.style.visibility = "hidden"; // "visible"
  objDiv.appendChild(objTable);
  document.getElementsByTagName("body")[0].appendChild(objDiv);


  /* Eigentliche Tabelle aufbauen - aus Breiten der Workaround-Tabelle */
  var intAdd = 0;
  var table = document.getElementById("galerieCont");

  while(table.firstChild != null)
    table.removeChild(table.firstChild);

  objTBody = document.createElement("tbody");
  objTR = document.createElement("tr");

  // Alle IDs der Workaround-Tabelle durchlaufen
  for(entry in arrIDs){
    // Zellen ID-weise ermitteln und übergeben
    objTD = document.getElementById(arrIDs[entry]);
    // Aktuelle Breite ermitteln
    var intHelp = parseInt(objTD.offsetWidth);
    //  Zelle einbinden
    objTR.appendChild(objTD);
    // Gesamtbreite ermitteln
    intAdd += intHelp;

    // Falls Maximalbreite erreicht wurde
    if(intAdd >= intScrWidth){
      intAdd = 0;
      objTBody.appendChild(objTR);
      objTR = document.createElement("tr");
    }
  }
  objTBody.appendChild(objTR);
  table.appendChild(objTBody);

  // Workaround-Tabelle wieder aus Dokument löschen
  document.getElementsByTagName("body")[0].removeChild(objDiv);
}
 //-->
</script>
</head>
<body>
<button onclick="dieFunktion();">ab ...</button>
<table id="galerieCont">
  <tr><td>Die Zelle</td></tr>
</table>
</body>
</html>
Ciao
Quaese
 
Ich krieg' gleich die Krise

Danke für deine Hilfe :)! Da das Script aber mit der Tabelleneinbindung im IE ohnehin nicht funktioniert - egal, ob ich die Sachen jetzt auslesen kann oder nicht, der IE lässt nicht zu, Tabellen einzubinden. Im Opera und Firefox geht's ...

Daher habe ich mich dazu entschlossen, das Layout mit CSS aufzubauen. Dazu habe ich dann den unten angefügten Code verwendet, der im IE bestens funktioniert ... dafür in Opera und Firevox nicht :mad:. Bei diesen beiden Browsern werden die Icons wild am Bildschirm angezeigt und die Struktur nicht eingehalten, wohingegen beim IE alles so angezeigt wird, wie es sein sollte.

Code: 
<html><head>
<style type="text/css">
	#beschriftung {
		float: left;
		text-align: center;
		width: 80px; //Breite des Icons folder.bmp
		border: 2px solid black; //Hilfsanzeige
	}
	img.icon {
		border: 2px solid black;
	}
	#box {
		width: 1cm; //danach folgt der Textumburch
		vertical-align: top;
		margin-right: 0.3cm;
		margin-bottom: 0.5cm;
		text-align: center;
	}
	
	#galerieCont {
		border: 2px solid black;
		width: 600;
	}
</style>

</head><body>

<h1>Galerie</h1>

<div id="galerieCont">
	<span id="box">
		<img src="res/folder.bmp" class="icon" />
		<p id="beschriftung">Eine g'scheide Beschriftung'</p>
	</span>
	<span id="box">
		<img src="res/folder.bmp" class="icon" />
		<p id="beschriftung">abc</p>
	</span>
	<span id="box">
		<img src="res/folder.bmp" class="icon" />
		<p id="beschriftung">Sackhüfen in Wels</p>
	</span>
	<span id="box">
		<img src="res/folder.bmp" class="icon" />
		<p id="beschriftung">abc</p>
	</span>
	<span id="box">
		<img src="res/folder.bmp" class="icon" />
		<p id="beschriftung">Vernisage in Pregarten</p>
	</span>
	<span id="box">
		<img src="res/folder.bmp" class="icon" />
		<p id="beschriftung">abc</p>
	</span>
	<span id="box">
		<img src="res/folder.bmp" class="icon" />
		<p id="beschriftung">abc</p>
	</span>
	<span id="box">
		<img src="res/folder.bmp" class="icon" />
		<p id="beschriftung">abc</p>
	</span>
</div>
</body></html>

Es ist aus der Haut zu fahren - kaum findet man eine Lösung für den einen Browser geht's im anderen wieder nicht. Gibt es irgendeinen Lösungsvorschlag (vornehmlich per CSS-Formatierung), mit dem ich die Bildergalerie in allen 3 großen Browsern einigermaßen gleich formatieren kann :confused:

MfG, Thomas D.

BTW: Zur Vereinfachung des Problems habe ich jetzt einfach mal den ganzen JavaScript-Teil weggelassen und eine rein dynamische Lösung verwendet.
 
Hi,

mein Script funktioniert bei mir auch im IE, ausserdem im Opera, Firefox und Konqueror.

Ich denke, dass Dein IE-Problem darin lag, dass Du die Tabellenzeile in das Tabellenelement einhängen
wolltest. Korrekterweise muss es jedoch in ein TBODY-Element eingehängt werden. Dieses wird dann in
die Tabelle eingebunden.

Ciao
Quaese
 
Quaese hat gesagt.:
Hi,

mein Script funktioniert bei mir auch im IE, ausserdem im Opera, Firefox und Konqueror.

Ich denke, dass Dein IE-Problem darin lag, dass Du die Tabellenzeile in das Tabellenelement einhängen
wolltest. Korrekterweise muss es jedoch in ein TBODY-Element eingehängt werden. Dieses wird dann in
die Tabelle eingebunden.

Ciao
Quaese
Zum Vergrößern anklicken....

Hm, jetzt habe ich die Tabellenlösung aber schon verworfen. Hättest du vielleicht auch eine Idee, wieso meine CSS-Lösung nicht in Browsern mit der Gecko Engine funktioniert? Ansonsten muss ich halt alles noch einmal auf die Tabellen umschreiben :) ...
 
So, bin jetzt wieder zur der von dir angedachten Tabellenlösung zurückgekehrt. Zuerst hat diese nur im Firefox und dem IE funktioniert, da Opera das DOM scheinbar etwas anders interpretiert (s. Code) :rolleyes:. Auf jeden Fall habe ich auch dieses Problem durch eine Opera-spezifische Browserweiche aus der Welt geschafft ;-). Jetzt gibt es nur mehr ein kleines Detailproblem (bei allen Browsern das gleiche): In der ersten Zeile der Bildausgabe wird ein Element früher umgebrochen als es sollte. Die restlichen Zeilen passen dann alle:

Code:

Code: 
<html><head></head><body>
<script type="text/javascript">
	var folderImg = new Image ();
	folderImg.src = "res/folder.bmp";
	var Bildinfos = new Array ("abc", "dkkd", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc", "dkkd", "aaaaaa", "cccc");

	function ordnerAuswahlAufbauen ()
	{
		var table = document.getElementById ("galerieCont");
		var hiddenTable = document.getElementById ("hiddenTable");
		var tr, td, tbody, img, c;
		
		//while (table.firstChild != null) //bisherigen Inhalt löschen
			//table.removeChild (table.firstChild);
		
		var ordnername, screenWidth = 600;
		var platz = 0;
		
		/*
		Als erstes wird die Struktur in einer versteckten Tabelle komplett aufgebaut; dies ist
		leider deshalb notwendig, da die offsetWidth von <td>-Tags erst dann korrekt ausgelesen
		werden kann, wenn die Tabelle vollständig in die HTML-Struktur eingebunden worden ist.
		Danach wird die Originaltabelle berechnet, die korrekt ausgerichtet ist  
		*/
		tbody = document.createElement ("tbody");
		tr = document.createElement ("tr");
		for (ordnername in Bildinfos)
		{
			platz += folderImg.width;
			if (platz >= screenWidth) //neue Zeile, da kein Platz mehr
			{
				tbody.appendChild (tr);
				tr = document.createElement ("tr");
				platz = 0;		
			}
			
			td = document.createElement ("td");
			img = document.createElement ("img");
			img.setAttribute ("src", folderImg.src);
			
			//img.setAttribute ("onMouseOver", "alert ('Hallo');");
			
			td.appendChild (img);
			td.appendChild (document.createTextNode (ordnername));
			tr.appendChild (td);
		}
		tbody.appendChild (tr);
		hiddenTable.appendChild (tbody);
		
		/*
		Nun wird die eigentlich sichtbare Tabelle erstellt; dies ist deshalb nötig, da die
		Zellenbreite erst dann berechnet werden kann, wenn die Tabelle in die DOM-Struktur
		eingebaut worden ist.
		*/ 
		
		var hiddenTr, hiddenTd;
		
		if (navigator.appName == "Opera")
		{	
			hiddenTr = hiddenTable.firstChild.firstChild; //läuft im Opera
			for (c=0; c<2000; c++) //Opera braucht "etwas Zeit", um die offsetWidth korrekt berechnen zu könne :rolleyes:
				;
		}
		else //läuft im Firefox und IE
			hiddenTr = hiddenTable.firstChild.nextSibling.firstChild;
		
		tbody = document.createElement ("tbody");
		tr = document.createElement ("tr");
		platz = 0;
		 
		while (hiddenTr != null)
		{
			hiddenTd = hiddenTr.firstChild;
			while (hiddenTd != null)
			{
				platz += hiddenTd.offsetWidth;
				if (platz >= screenWidth) //neue Zeile, da kein Platz mehr
				{
					tbody.appendChild (tr);
					tr = document.createElement ("tr");
					platz = 0;
				}
				
				td = document.createElement ("td");
				
				//alle Kindknoten des versteckten TDs an das neue anhängen
				td = hiddenTd.cloneNode (true); //alle Informationen werden mitgeklont - Kindeelement und Text
				
				tr.appendChild (td);
				hiddenTd = hiddenTd.nextSibling;
			}
			hiddenTr = hiddenTr.nextSibling;
		}
		tbody.appendChild (tr);
		table.appendChild (tbody);
	}
</script>

<h1>Galerie</h1>

<table id="galerieCont" border>
</table>
<table id="hiddenTable" style="visibility: hidden">
</table>

<script language="JavaScript" type="text/javascript">
	ordnerAuswahlAufbauen ();
</script>
</body></html>

Vielleicht kommt ja wer auf den Fehler drauf ...

MfG, Thomas D.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück