Jan: Zugriff auf CSS Attribut "background-position" nicht möglich

Hallo,

kann man per Javascript das Attribut Background-position eines Divs auslesen, wenn dieses nicht im styles-Tag des Html-Elementes definiert ist?

Hier ein Bsp. welches das Problem verdeutlicht. Die Ausgabe ist in allen getesteten Browsern (IE6, IE7, FF und Opera) für das Div test1 ""(leerer String) und für das Div2 test2 "center bottom".

Ich finde in den Dokumentation nichts, was dieses Verhalten erklärt.

<html>
<head>

<script type="text/javascript">
  function test() {
   alert(document.getElementById('test1').style.backgroundPosition);
   alert(document.getElementById('test2').style.backgroundPosition);
  }
 </script>

<style type="text/css">
  div#test1 { background-position: center bottom; }
 </style>

</head>
<body onload="test()">
  <div id="test1" >test 1</div>
  <div id="test2" style="background-position: center bottom;">test 2</div>
</body>
</html>

  1. Hi,

    kann man per Javascript das Attribut Background-position eines Divs auslesen, wenn dieses nicht im styles-Tag des Html-Elementes definiert ist?

    Versuchs mal mit getStyle().

    mfG,
    steckl

    1. Hi,

      danke für deine Antwort. Leider funktioniert das Auslesen auch mit der Funktion nicht. Im IE und im FF sind die ausgelesenen Werte immer noch undefiniert.

      Hier der Quellcode zum Testen:

      <html>
      <head>

      <script type="text/javascript">
        function test() {
         alert(document.getElementById('test1').style.backgroundPosition);
         alert(document.getElementById('test2').style.backgroundPosition);
         alert(getStyle(document.getElementById("test1"), "background-position"));
        }

      function getStyle(oElm, strCssRule){
         var strValue = "";
         if(document.defaultView && document.defaultView.getComputedStyle){
          strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
         }
         else if(oElm.currentStyle){
          strCssRule = strCssRule.replace(/-(\w)/g, function (strMatch, p1){
           return p1.toUpperCase();
          });
          strValue = oElm.currentStyle[strCssRule];
         }
         return strValue;
        }

      </script>

      <style type="text/css">
        #test1 { background-position: center bottom; }
       </style>

      </head>
      <body onload="test()">
        <div id="test1" >test 1</div>
        <div id="test2" style="background-position: center bottom;">test 2</div>
      </body>
      </html>

      Hi,

      kann man per Javascript das Attribut Background-position eines Divs auslesen, wenn dieses nicht im styles-Tag des Html-Elementes definiert ist?

      Versuchs mal mit getStyle().

      mfG,
      steckl

      1. Hallo,

        ... Leider funktioniert das Auslesen auch mit der Funktion nicht. Im IE und im FF sind die ausgelesenen Werte immer noch undefiniert.

        möglicherweise hast du die Funktion falsch angewendet und nicht die richtigen Argumente übergeben ...

        Gruß plan_B

        --
             *®*´¯`·.¸¸.·
        1. möglicherweise hast du die Funktion falsch angewendet und nicht die richtigen Argumente übergeben ...

          sorry, sehe erst jetzt, dass du getStyle() vollkommen richtig angewendet hast. Aber ein background-image hast du noch nicht definiert. Dann ist die Positionsangabe allein nicht sinnvoll.

          Gruß plan_B

          --
               *®*´¯`·.¸¸.·
          1. Hallo,

            auch das ändert leider nichts an dem Problem.

            Hier der angepasste Quellcode (inkl. background-image):

            <html>
            <head>

            <script type="text/javascript">
              function test() {
               alert(document.getElementById('test1').style.backgroundPosition);
               alert(document.getElementById('test2').style.backgroundPosition);
               alert(getStyle(document.getElementById("test1"), "background-position"));
              }

            function getStyle(oElm, strCssRule){
               var strValue = "";
               if(document.defaultView && document.defaultView.getComputedStyle){
                strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
               }
               else if(oElm.currentStyle){
                strCssRule = strCssRule.replace(/-(\w)/g, function (strMatch, p1){
                 return p1.toUpperCase();
                });
                strValue = oElm.currentStyle[strCssRule];
               }
               return strValue;
              }

            </script>

            <style type="text/css">
              #test1 {
               background-position: center bottom;
               background-image: url(img/body_background.jpg);
              }
             </style>

            </head>
            <body onload="test()">
              <div id="test1" >test 1</div>
              <div id="test2" style="background-position: center bottom; background-image: url(img/body_background.jpg);">test 2</div>
            </body>
            </html>

            möglicherweise hast du die Funktion falsch angewendet und nicht die richtigen Argumente übergeben ...

            sorry, sehe erst jetzt, dass du getStyle() vollkommen richtig angewendet hast. Aber ein background-image hast du noch nicht definiert. Dann ist die Positionsangabe allein nicht sinnvoll.

            Gruß plan_B

      2. Hallo,

        Leider funktioniert das Auslesen auch mit der Funktion nicht. Im IE und im FF sind die ausgelesenen Werte immer noch undefiniert.

        scheinbar lässt sich nicht jede Style-Eigenschaft mit jedem Browser auslesen:
        background-color schafft wohl jeder
        und background-position bei mir nur Opera

        Gruß plan_B

        --
             *®*´¯`·.¸¸.·