Tabellenhöhe mit getComputedStyle() auslesen - und wie weiterverarbeiten?

Hallo!

Folgendes Problem: Ich habe eine Haupttabelle und eine Sidebar (ebenfalls Tabelle), die genauso groß sein soll, wie die Haupttabelle. Da diese allerdings keine feste Höhe hat (passt sich dem Inhalt an), muss ich diese ja irgendwie auslesen - ich dachte da an getComputedStyle(). Das funktioniert soweit auch ganz gut, aber irgendwie bin ich zu doof das weiterzuverarbeiten. Das Script gibt mir ja die Höhe in einer alert-Box aus - wie bekomme ich den da nun den Wert heraus, um ihm irgendwie meiner anderen Tabelle als Höhe zuzuweisen?

Hier mal mein Code:

PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>


<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--

function getCS(objid,prop)
{
  var obj, propval;
  if (document.documentElement && document.defaultView)
  {
    obj=document.getElementById(objid);
    propval=document.defaultView.getComputedStyle(obj,"").getPropertyValue(prop);
    alert(prop+": "+propval);
  }
  else
  {
    alert("Ihr Browser unterstuetzt diese W3C-DOM-Methode nicht.");
  }
}

//-->
</SCRIPT>
</HEAD>

<BODY BGCOLOR="#EEEEEE">


<table>
	<tr>
		<td id="abs1" width="100" bgcolor="#4hfhja">Inhalt<br><br><br>...</td>
	</tr>
</table>

<FORM ACTION="">
<INPUT TYPE="button" VALUE="Höhe" onClick="getCS('abs1','height')">
</FORM>

</BODY>
</HTML>
 
Hallo,
also du hättest da mehrere Möglichkeiten
- die Tabelle existiert bereits und du änderst ihre höhe (zb. document.getElementById("idDerTabelle").style.height = variableInDerDieHoeheGespeichertIst + "px")
- es gibt irgend ein umspannendes Element in das die Tabelle eingefügt werden soll (zb. document.getElementById("idDesElements").innerHTML = "<table style='height:"+variableInDerDieHoeheGespeichertIst+"px' ><tr>......")
- oder du fügst die Tabelle über die entsprechenden DOM Methoden ein (createElement(), appendChild())

um getComputedStyle auch im IE verwenden zu können (oder besser gesagt die Alternative) könntest du zb diese Funktion verwenden (irgendwo im Internet gefunden - keine eigene Leistung ;-) ):
HTML:
function getStyle(oElm, strCssRule){
	var strValue = "";
	if(document.defaultView && document.defaultView.getComputedStyle){
		strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
	}
	else if(oElm.currentStyle){
		try{
			strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
				return p1.toUpperCase();
			});
			strValue = oElm.currentStyle[strCssRule];
		}
		catch(e){
			// Used to prevent an error in IE 5.0
		}
	}
	return strValue;
}

in deinem Fall würdest du dann jedoch für height den wert "auto" im IE erhalten, daher wäre es klüger wenn du mit obj.offsetHeight die Höhe ausmisst.
(Und das allerbeste, aber ich denke das weißt du selbst wäre wenn du dein Problem ohne Javascript mit HTML und style löst - ich denke das sollte in diesem Fall zu schaffen sein )
 
Okay, erstmal vielen Dank für deine Mühe.

Ich habe das nochmal überdacht und du hast recht, offSetHeight wäre auf Grund der Kompatibilität wohl wirklich am besten. Ich habe das jetzt folgendermaßen gemacht:

PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>

<script type="text/javascript" language="javascript">
<!--

var coheight = document.getElementById("content").offsetHeight;
document.getElementById("sidebar").style.height = coheight + "px")

//-->
</script>

</HEAD>

<BODY>

<table>
	<tr>
		<td valign="top">
		
			<table>
				<tr>
					<td id="sidebar" width="100" bgcolor="#2947f"></td>
				</tr>
			</table>
		
		</td>
		
		<td>
		
			<table>
				<tr>
					<td id="content" width="100" bgcolor="#4hfhja">Inhalt<br><br><br>...</td>
				</tr>
			</table>
		
		</td>
	</tr>
</table>




</BODY>
</HTML>

Funktioniert aber nicht. Stimmt da syntaktisch was nicht (bin in Javascript nicht so bewandert)?

Lg
 
Zuletzt bearbeitet:
Hi,

du kannst erst auf die Elemente des Dokuments zugreifen, wenn es fertig geladen ist - im onload-Event.
Code:
window.onload = function(){
  var coheight = document.getElementById("content").offsetHeight;
  document.getElementById("sidebar").style.height = coheight + "px";
}
Ciao
Quaese
 

Neue Beiträge

Zurück