Uschi Renziehausen: Eigenschaften einer css-Klasse auslesen

guten morgen, liebe freunde,

sagt mal, gibt es eine möglichkeit, via js herauszufinden, welche eigenschaften in einer css-klasse gesetzt sind, wenn ich deren namen kenne?
ich möchte rausfinden rausfinden, ob irgendwelche display-eigenschaften gesetzt sind.

liebe gruesse und prost kaffee, uschi

  1. Hi Uschi,

    sagt mal, gibt es eine möglichkeit, via js herauszufinden, welche eigenschaften in einer css-klasse gesetzt sind, wenn ich deren namen kenne?

    ja -> http://selfhtml.teamone.de/javascript/objekte/style.htm#get_attribute

    ich möchte rausfinden rausfinden, ob irgendwelche display-eigenschaften gesetzt sind.

    x = document.getElementById("deineID").style.display;

    LG Orlando

    --
    SELF-TREFFEN 2002
    http://www.rtbg.de/selftreffen/
    http://www.megpalffy.org/temp/penneninhh.html

    1. Gugucks Orlando,

      wenn eine css-Eigenschaft nicht im style-Attribut definiert ist, sondern in einer css-Klasse, dann kannst du auf diese Eigenschaft auch nicht unter style zuggreifen. Zurück kommt dann "undefined".

      nun kann ich zwar mit el.className an den Namen der css-Klasse herankommen, kann aber nicht auslesen, was für Eigenschaften in dieser Klasse gesetzt sind. Wie gesagt, mit style kommt man nicht ran.

      liebe gruesse, uschi

      Hi Uschi,

      sagt mal, gibt es eine möglichkeit, via js herauszufinden, welche eigenschaften in einer css-klasse gesetzt sind, wenn ich deren namen kenne?

      ja -> http://selfhtml.teamone.de/javascript/objekte/style.htm#get_attribute

      ich möchte rausfinden rausfinden, ob irgendwelche display-eigenschaften gesetzt sind.

      x = document.getElementById("deineID").style.display;

      LG Orlando

      --
      SELF-TREFFEN 2002
      http://www.rtbg.de/selftreffen/
      http://www.megpalffy.org/temp/penneninhh.html

      1. Hallo,

        nun kann ich zwar mit el.className an den Namen der css-Klasse herankommen, kann aber nicht auslesen, was für Eigenschaften in dieser Klasse gesetzt sind. Wie gesagt, mit style kommt man nicht ran.

        Das duerfte nur auf den IE zutreffen. Dort kommt man mit currentStyle heran: http://www.styleassistant.de/tips/tip64.htm.

        MfG, Thomas

        1. danke thomas,

          für den IE funzt currentStyle tatsächlich, aber leider müßte es eben auch unter NN6 gehen. fällt dir nicht vielleicht doch noch was ein?

          liebe gruesse, uschi

          1. Hallo,

            für den IE funzt currentStyle tatsächlich, aber leider müßte es eben auch unter NN6 gehen. fällt dir nicht vielleicht doch noch was ein?

            Die Methode getComputedStyle() gibt auch die vordefinierten Werte zurueck, siehe: http://www.styleassistant.de/tips/tip56.htm.
            Das klappt dann wiederum nicht im IE.

            MfG, Thomas

  2. Hallo Uschi

    sagt mal, gibt es eine möglichkeit, via js herauszufinden, welche eigenschaften in einer css-klasse gesetzt sind, wenn ich deren namen kenne?
    ich möchte rausfinden rausfinden, ob irgendwelche display-eigenschaften gesetzt sind.

    ich habe dir ein kleines Objekt geschrieben, was zur Laufzeit die CSS-Objekte ausliest und dir die gewünschten Klasseneigenschaften liefert.

    Es funktioniert unter NN 4, NN 6.2, Mozilla und IE ab Version 5. Für Opera gibt es keine Möglichkeit, da es weder die verwendeten Objekte noch for in Schleifen für doumenteneigene Objekte unterstützt.

    <html>
    <head>
    <title></title>
    <meta name="author" content="Antje Hofmann">
    <meta name="generator" content="Ulli Meybohms HTML EDITOR">
    <style type="text/css">
    <!--
    .eineKlasse {display:none;}

    -->
    </style>
    </head>
    <body type="text/javascript">
    <script>
    <!--

    /*
     Klasse, zum Auslesen von Eigenschaften definierter Klassen innerhalb von
     internen CSS-Bereichen oder Klassen in externen CSS-Dateien

    Autor: Antje Hofmann
     Datum: 10.08.2002
     Version: 1.0
     unterstützte Browser: IE ab Version 5, Netscape 4 (4.5 getestet), NN 6.2, Mozilla 1.0
    */

    function initClassProperties()
     {
       this.classGroup = new Array();
       this.createClassarray = createClassarray;
       this.getProperty =getProperty;

    this.createClassarray();

    function createClassarray()
       {

    if (document.styleSheets)
          for (var i=0;i<document.styleSheets.length;i++)
            for (var j in document.styleSheets[i])
            if (j=="rules" || j=="cssRules")
             for (var k=0;k<document.styleSheets[i][j].length;k++)
              if (document.styleSheets[i][j][k].selectorText.charAt(0)==".") {
                 if (!this.classGroup[document.styleSheets[i][j][k].selectorText.substring(1)])
                 this.classGroup[document.styleSheets[i][j][k].selectorText.substring(1)]=new Array();
                 for (var l in document.styleSheets[i][j][k].style) {
                 if (typeof document.styleSheets[i][j][k].style[l]!="function" && typeof document.styleSheets[i][j][k].style[l]!="objekt")
                 if (!this.classGroup[document.styleSheets[i][j][k].selectorText.substring(1)][l] ||(this.classGroup[document.styleSheets[i][j][k].selectorText.substring(1)][l]!=document.styleSheets[i][j][k].style[l] && document.styleSheets[i][j][k].style[l]!=""))
                 this.classGroup[document.styleSheets[i][j][k].selectorText.substring(1)][l]=document.styleSheets[i][j][k].style[l];
                                                                   }
                                                                             }
       }

    function getProperty(classname,attribut)
       {
        if (!window.opera && document.layers && classname && attribut)
        return document.classes[classname].all[attribut]
        else if (this.classGroup[classname]) return this.classGroup[classname][attribut]
        else return void(0)
       }
    }

    /*Initialisierung des Objektes */
     allClass = new initClassProperties();

    /*Ausgabe der Klasseneigenschaft, Parameter Klassenname, Attribut*/
     document.write(allClass.getProperty("eineKlasse","display"))

    //-->
    </script>
    </body>
    </html>

    Viele Grüße

    Antje

    1. Antje,
      ich könnte dich knutschen bis du schielst. Damit werde ich jetzt eine Woche auf der Alm spielen, bis ich das begriffen habe, und mit Glück werden die aberhunderte von chinesisch und japanisch und wohl auch latein lernenden leuten dankbar sein :-))

      liebe gruesse,uschi

      ps: ich muss das script erstmal verdauen, und koffer packen, weil ich morgen auf "klassenfahrt" mit meinem intensivkurs gehe, eben auf die alm. vielleicht lichtet ja die bergluft das chaos in meinem hirn.

      liebe grüße, uschi

      Hallo Uschi

      sagt mal, gibt es eine möglichkeit, via js herauszufinden, welche eigenschaften in einer css-klasse gesetzt sind, wenn ich deren namen kenne?
      ich möchte rausfinden rausfinden, ob irgendwelche display-eigenschaften gesetzt sind.

      ich habe dir ein kleines Objekt geschrieben, was zur Laufzeit die CSS-Objekte ausliest und dir die gewünschten Klasseneigenschaften liefert.

      Es funktioniert unter NN 4, NN 6.2, Mozilla und IE ab Version 5. Für Opera gibt es keine Möglichkeit, da es weder die verwendeten Objekte noch for in Schleifen für doumenteneigene Objekte unterstützt.

      <html>
      <head>
      <title></title>
      <meta name="author" content="Antje Hofmann">
      <meta name="generator" content="Ulli Meybohms HTML EDITOR">
      <style type="text/css">
      <!--
      .eineKlasse {display:none;}

      -->
      </style>
      </head>
      <body type="text/javascript">
      <script>
      <!--

      /*
      Klasse, zum Auslesen von Eigenschaften definierter Klassen innerhalb von
      internen CSS-Bereichen oder Klassen in externen CSS-Dateien

      Autor: Antje Hofmann
      Datum: 10.08.2002
      Version: 1.0
      unterstützte Browser: IE ab Version 5, Netscape 4 (4.5 getestet), NN 6.2, Mozilla 1.0
      */

      function initClassProperties()
      {
         this.classGroup = new Array();
         this.createClassarray = createClassarray;
         this.getProperty =getProperty;

      this.createClassarray();

      function createClassarray()
         {

      if (document.styleSheets)
            for (var i=0;i<document.styleSheets.length;i++)
              for (var j in document.styleSheets[i])
              if (j=="rules" || j=="cssRules")
               for (var k=0;k<document.styleSheets[i][j].length;k++)
                if (document.styleSheets[i][j][k].selectorText.charAt(0)==".") {
                   if (!this.classGroup[document.styleSheets[i][j][k].selectorText.substring(1)])
                   this.classGroup[document.styleSheets[i][j][k].selectorText.substring(1)]=new Array();
                   for (var l in document.styleSheets[i][j][k].style) {
                   if (typeof document.styleSheets[i][j][k].style[l]!="function" && typeof document.styleSheets[i][j][k].style[l]!="objekt")
                   if (!this.classGroup[document.styleSheets[i][j][k].selectorText.substring(1)][l] ||(this.classGroup[document.styleSheets[i][j][k].selectorText.substring(1)][l]!=document.styleSheets[i][j][k].style[l] && document.styleSheets[i][j][k].style[l]!=""))
                   this.classGroup[document.styleSheets[i][j][k].selectorText.substring(1)][l]=document.styleSheets[i][j][k].style[l];
                                                                     }
                                                                               }
         }

      function getProperty(classname,attribut)
         {
          if (!window.opera && document.layers && classname && attribut)
          return document.classes[classname].all[attribut]
          else if (this.classGroup[classname]) return this.classGroup[classname][attribut]
          else return void(0)
         }
      }

      /*Initialisierung des Objektes */
      allClass = new initClassProperties();

      /*Ausgabe der Klasseneigenschaft, Parameter Klassenname, Attribut*/
      document.write(allClass.getProperty("eineKlasse","display"))

      //-->
      </script>
      </body>
      </html>

      Viele Grüße

      Antje

  3. hi

    http://www.xs4all.nl/~ppk/js/getstyles.html da hat's auch noch einige Infos zu diesem Thema.

    function getStyle(el,styleProp)
    {
     var x = document.getElementById(el);
     if (document.defaultView)
      var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
     else if (x.currentStyle)
      var y = eval('x.currentStyle.' + styleProp);
     return y;
    }

    das ist die Funktion von dort, die in Mozilla und MSIE ab Version 5 (Mac und Windows) funktioniert. Opera und konqueror können's gar nicht.

    Grüße aus Bleckede

    Kai

    p.s. neue URL ;)

    1. ich danke dir fürchterlich herzlich,

      dass es sowas wie document.defaultView überhaupt gibt, wusste ich gar nicht, von getComputedStyle() auch nicht.
      da heisst es immer RTFM und ich gehöre doch zur lesenden Fraktion, aber manchmal weiss frau echt nicht mehr, wo suchen.

      liebe gruesse, uschi