Style abfragen funktioniert nicht?

DataFox

DataFox

Erfahrenes Mitglied
Hi

ich möchte den Style eines Elementes abfragen. Bei mir sind Elemente absolut positioniert, und ich will wissen, welche top bzw. left Eigenschaft sie haben.

Code: 
meinElement = document.getElementById('meinElement');
alert(meinElement.style.top);

ist immer leer. Die Style-Eigenschaft ist per externem Stylesheet festgelegt, nicht am Element selbst.

Wie kann ich das abfragen, wenn nicht so?
Ändern kann ich den Style. Nur abfragen nicht!

Getestet in Firefox 3.

Gruß
Laura
 
Hi,

die Abfrage funktioniert browserübergreifend scheinbar wohl nur bei Inline-Styleangaben, also via style-Attribut, wie das auf DOM-Syntax abgewandelte SELFHTML-Beispiel http://de.selfhtml.org/javascript/objekte/style.htm#get_attribute demonstriert:

Inline-Stylesheet:
Code: 
<html><head><title>Test</title>
<script type="text/javascript">
function Test () {
  var fontsize = document.getElementById("Absatz").style.fontSize;
  alert(fontsize);
}
</script>
</head><body>
<p id="Absatz" style="font-size:1.5em">Ein Text</p>
<a href="javascript:Test()">Test</a>
</body></html>

Zentrales Stylesheet:
Code: 
<html><head><title>Test</title>
<script type="text/javascript">
function Test () {
  var fontsize = document.getElementById("Absatz").style.fontSize;
  alert(fontsize);
}
</script>
<style type="text/css">
<!--
#Absatz {
font-size:1.5em
}
-->
</style>
</head><body>
<p id="Absatz">Ein Text</p>
<a href="javascript:Test()">Test</a>
</body></html>
mfg Maik
 
Hi,

versuch mal über die Methoden currentStyle bzw. getComputedStyle auf die gewünschten Styles zuzugreifen.
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<script type="text/javascript">
  <!--
function getCSSValue(strID, strCSS){
  var varValue;

  //  Falls der Brower die Methode "getComputedStyle" kennt (W3C-DOM)
  if(window.getComputedStyle){
    varValue = window.getComputedStyle(document.getElementById(strID), null)[strCSS];
  //  Falls der Browser die Methode "currentStyle" kennt (neuere IEs)
  }else if(document.getElementById(strID).currentStyle){
    varValue = document.getElementById(strID).currentStyle[strCSS];
  }

  return varValue;
}
 //-->
</script>
<style type="text/css">
<!--
#Absatz {
font-size:1.5em
}
-->
</style>
</head>
<body>
<p id="Absatz">Ein Text</p>
<button onclick="alert(getCSSValue('Absatz', 'fontSize'));">Test</button>
<hr>
</body>
</html>
Ciao
Quaese
 
Hi,

okay, da ist mir dann wohl etwas entgangen :-(

Doch wieso geben bei mir in diesem Beispiel FF 2 + 3, Opera und Safari als Schriftgröße "24px" anstelle von "1.5em" aus?

mfg Maik
 
Hi,

die von dir genannten Browser geben die tatsächliche berechnete Grösse der Zeichen aus.
Computed style represents the final computed values of all CSS properties for the element (Quelle: MDC)
Zum Vergrößern anklicken....
Würdest du zum Beispiel die Zeichengrösse im Body auf 2em setzen, würde als berechnete Grösse 48 Pixel ausgegeben werden.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück