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

SELF-Forum

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

Jan
– Informationen zu den Bewertungsregeln

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>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Zugriff auf CSS Attribut "background-position" nicht möglich

    steckl
    – Informationen zu den Bewertungsregeln

    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

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Zugriff auf CSS Attribut "background-position" nicht möglich

      Jan
      – Informationen zu den Bewertungsregeln

      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

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Zugriff auf CSS Attribut "background-position" nicht möglich

        plan_B
        – Informationen zu den Bewertungsregeln

        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

        --
             *®*´¯`·.¸¸.·
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Zugriff auf CSS Attribut "background-position" nicht möglich

          plan_B
          – Informationen zu den Bewertungsregeln

          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

          --
               *®*´¯`·.¸¸.·
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Zugriff auf CSS Attribut "background-position" nicht möglich

            Jan
            – Informationen zu den Bewertungsregeln

            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

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

      2. Zugriff auf CSS Attribut "background-position" nicht möglich

        plan_B
        – Informationen zu den Bewertungsregeln

        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

        --
             *®*´¯`·.¸¸.·
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln