Auslesen von Style-Infos mit getElementById().style...

  • Themenstarter Themenstarter Netzwerkidi
  • Beginndatum Beginndatum
N

Netzwerkidi

Hallo,

ich habe hier ein kleine Sache, dir mir nicht ganz einleuchtet.
Ich möchte bestimmte Style-Infos auslesen, es ist auch alles geladen - aber die Style-Infos jibbet nitt.
Vielleicht einer, woran das liegt, bzw. wie man Infos doch bekommen kann.

Vielen Dank + beste Grüße
Netzwerkidi

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">       
  <head>             
    <title>test get style     
    </title>             
    <style type="text/css">#d0 {   margin:250px; }      
    </style>         
<script type="text/javascript">
    function test()
    {   
      var t0 = document.getElementById('d0').style.margin;
      document.write("Margin = "+t0+"<br>");  // suprise, hier du nix sehen!!
      var t1 = document.getElementById('d0').style.margin=150+"px";
      document.write("Margin = "+t1);   
    } 
    //test();
</script>        
  </head>       
  <body>             
    <!--<div id="d0" style="margin:250px;"> // SO GINGE ES AUCH!! -->
    <div id="d0">
    </div>        
    <script>
      test();
    </script>        
  </body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
hola,

ich hatte das Problem auch. Wollte mich aber nicht länger damit beschäfftigen und habe mit document.getElementById("infobox").innerHTML = document.getElementById('deinObjekt').style.margin;
die Infos in Divs ausgeben lassen. Das hatte geklappt.

Gruß
Rown
 
Jo, danke. Ich habe es jetzt anders gelöst. Trotzdem würde ich es gerne verstehen.
Hängt vielleicht damit zusammen, dass die Eigenschaften nicht direkt am Objekt hängen sondern über das Stylesheet zig Klassen betreffen können. Ist aber nur eine Vermutung.
 
Netzwerkidi hat gesagt.:
Hängt vielleicht damit zusammen, dass die Eigenschaften nicht direkt am Objekt hängen sondern über das Stylesheet zig Klassen betreffen können. Ist aber nur eine Vermutung.
Zum Vergrößern anklicken....

So ist es. Du ließt lediglich den Wert des properties "style" aus. Denn die anderen Stylesheets beeinflussen ja nicht das DOM, sondern nur die Darstellung. Sie sind also nicht wirklich Teil deines HTML Objektes.
Ums kurz zu machen:

https://developer.mozilla.org/en/DOM:window.getComputedStyle
 
... oder du verwendest einfach jQuery:
HTML: 
<!DOCTYPE html>
<html>
  <head>
    <title>test get style</title>
    <style type="text/css">
      #d0 {margin: 250px;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        alert(
          'margin-top: ' + $('#d0').css('marginTop') +
          '\nmargin-right: ' + $('#d0').css('marginRight') +
          '\nmargin-bottom: ' + $('#d0').css('marginBottom') +
          '\nmargin-left: ' + $('#d0').css('marginLeft') +
          '\nmargin: ' + $('#d0').css('margin')
        );
      });
    </script>
  </head>
  <body>
    <div id="d0">Hallo</div>
  </body>
</html>
 
Du sprichst genau den Punkt an: ich wollte in diesem Fall jquery "loswerden"...
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück