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”).
Kategorie: CSS
