tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
5
ZUGRIFFE
1394
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 19.09.08 18:48 #1
    Avatar von DataFox
    DataFox DataFox ist offline Mitglied Brokat
    Registriert seit
    Nov 2007
    Beiträge
    267
    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 :
    1
2

    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
     
    Zitieren Zitieren
  2. 19.09.08 19:24 #2
    Maik Tutorials.de Gastzugang
    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/ob...#get_attribute demonstriert:

    Inline-Stylesheet:
    Code :
    1
2
3
4
5
6
7
8
9
10
11

    <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 :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

    <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
     
    Zitieren Zitieren
  3. 20.09.08 07:06 #3
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    Hi,

    versuch mal über die Methoden currentStyle bzw. getComputedStyle auf die gewünschten Styles zuzugreifen.
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

    <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
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
    Zitieren Zitieren
  4. 20.09.08 11:13 #4
    Maik Tutorials.de Gastzugang
    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
     
    Zitieren Zitieren
  5. 20.09.08 22:10 #5
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    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)
    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
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
    Zitieren Zitieren
  6. 20.09.08 22:12 #6
    Maik Tutorials.de Gastzugang
    Dank dir, Quaese

    mfg Maik
     
    Zitieren Zitieren
« Array ausgeben geht nicht? | document.location mit Target »

Ähnliche Themen

  1. [VS C++ mit WinAPI] XP - Style funktioniert nicht
    Von Funjoy im Forum C/C++
    Antworten: 0
    Letzter Beitrag: 15.07.07, 06:46
  2. Style funktioniert nicht bei Verlinkung
    Von rundes kipfal im Forum CSS
    Antworten: 2
    Letzter Beitrag: 20.08.06, 21:36
  3. Warum funktioniert das Style-Attribut nicht?
    Von Prophet05 im Forum HTML & XHTML
    Antworten: 4
    Letzter Beitrag: 09.07.05, 18:37
  4. This.class bzw. this.style funktioniert nicht!
    Von Hankman im Forum Javascript & Ajax
    Antworten: 5
    Letzter Beitrag: 27.05.05, 12:29
  5. Abfrage des Style-Status' funktioniert nicht
    Von Delmar im Forum Javascript & Ajax
    Antworten: 3
    Letzter Beitrag: 31.10.04, 12:43