Verwendete CSS-Eigenschaften ermitteln

In diesem Artikel lesen Sie, wie Sie alle auf ein Element angewendeten CSS-Eigenschaften ermitteln können.

Der folgenden Javascript-Funktion CSSEigenschaftenAnzeigen(…) müssen Sie entweder einen HTML-Tag (z.B. “H1″), eine Klasse (z.B. “.Klasse”) oder eine ID (z.B. “#ID”) übergeben.

Als Rückgabe erhalten Sie eine Liste mit allen auf dieses Element angewendeten CSS-Eigenschaften.

<html>
<head>
<script language="Javascript">
<!--

function CSSEigenschaftenAnzeigen(Eigenschaft)
{
    document.getElementById("CSSEigenschaften").value = "";

    if(!Eigenschaft || !document.styleSheets)
    {
        return null;
    }

    var i = document.styleSheets.length;

    while(i--)
    {
        if(document.styleSheets[i].rules)
        {
            var Regeln = document.styleSheets[i].rules;
        }
        else
        {
            var Regeln = document.styleSheets[i].cssRules;
        }

        var j = Regeln.length;

        while(j--)
        {
            if(Regeln[j].selectorText.toLowerCase() == Eigenschaft.toLowerCase())
            {
                var Stile = new Array();

                for(k in Regeln[j].style)
                {
                    Stile[Stile.length] = k;
                }

                var Zaehler = Stile.length;

                while(Zaehler--)
                {
                    if(Stile[Zaehler])
                    {
                        if(Regeln[j].style[Stile[Zaehler]] && typeof(Regeln[j].style[Stile[Zaehler]]) != 'function' && typeof(Regeln[j].style[Stile[Zaehler]]) != 'object')
                        {
                            document.getElementById("CSSEigenschaften").value += Stile[Zaehler] + ' = ' + Regeln[j].style[Stile[Zaehler]] + "n";
                        }
                    }
                }

                return true;
            }
        }
    }

    return null;
}

-->
</script>
<style type="text/css">
<!--

H1 {
 color: green;
 text-align: center;
}

-->
</style>
<title>Verwendete CSS-Eigenschaften ermitteln</title>
</head>
<body>

<h1>Hallo Welt!</h1>

<button onClick="javascript:CSSEigenschaftenAnzeigen('H1')">CSS-Eigenschaften anzeigen</button><br>
<textarea cols="40" id="CSSEigenschaften" rows="10"></textarea>

</body>
</html>

Vergessen Sie bei der Angabe einer Klasse nicht den dazugehörigen Punkt (“.klasse”) bei der Übergabe an die Funktion. Gleiches gilt für die Raute bei einer ID (“#ID”).

1895 Tage ago by in CSS | You can follow any responses to this entry through the RSS feed. You can leave a response, or trackback from your own site.

Leave A Response