nicht angemeldet
CSS-Klassenhierarchie auslesen?
Hallo,
Gibt es eine Möglichkeit, zu einem HTML-Element nicht nur das Style-Element und seine CSS-Klasse, sondern auch alle darüber liegenden (vererebenden) Klassen und deren Eigenschaften zu bekommen?
Also, Beispiel
<style type="text/css">
<!--
.absatz {
background-color: blue;
}
.absatz .zeile {
padding-left: 30px;
}
-->
</style>
<div class="abastz">
<div class="zeile" id="test" style="font-size: 8px">
....
</div>
</div>
Über document.getElementById("test").style.fontSize krieg ich von test zumindest seinen style, durch Durchsuchen des document.stylesheets-Arrays käme ich im IE und im Mozilla zumindest an eine einzelne CSS-Klasse dran - aber nicht an alle Eltern-Klassen.
Eine Möglichkeit wäre, über dem DOM-Baum langsam nach oben zu gehen, und in jedem Schritt die Klasse des aktuellen Elementes auszulesen - aber performant ist das nicht.
Gibts nicht sowas wie
"document.getElementById("element").getAllStyles"?
Gruesse, Jörg
-
Hi,
Gibts nicht sowas wie
"document.getElementById("element").getAllStyles"?meinst Du evtl. http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSview-getComputedStyle?
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes -
Hallo,
"document.getElementById("element").getAllStyles"?
Vielleicht hilft neben der DOM-konformen Methode getComputedStyle() auch die Eigenschaft currentStyle im IE. Hier mal ein Beispiel, welches zwei Klassen sowie eine Inline-Style-Eigenschaft fuer einen Absatz definiert.
Der Script-Teil liefert die vom Browser ausgewerteten Eigenschaft-Wert-Paare (bzw. verfuegbare Methoden):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test by TM 09/04</title>
<style type="text/css">
<!--.a
{
color: #FFC;
background-color: #00C;
}.b
{
font-style: italic;
}-->
</style>
</head>
<body>
<p id="absatz" class="a b" style="font-weight: bold">Text</p>
<p>
<script language="JavaScript" type="text/javascript">
<!--var d,domstyles,iestyles,p;
d=document.getElementById("absatz");
domstyles=false;
iestyles=false;if(document.defaultView && document.defaultView.getComputedStyle)domstyles=document.defaultView.getComputedStyle(d,null);
else if(d.currentStyle)iestyles=d.currentStyle;if(domstyles)for(p in domstyles)document.write(p+" : "+domstyles[p]+"<br>");
else if(iestyles)for(p in iestyles)document.write(p+" : "+iestyles[p]+"<br>");//-->
</script>
</p>
</body>
</html>MfG, Thomas
-
Hi,
if(document.defaultView && document.defaultView.getComputedStyle)domstyles=document.defaultView.getComputedStyle(d,null);
else if(d.currentStyle)iestyles=d.currentStyle;ich bin gerne bereit zu glauben, dass ich etwas Wesentliches übersehen habe; aber warum benutzt Du hier zwei verschiedene Variablen? Offenbar werden sie identisch verwendet, nur dass der selbe Code doppelt notiert werden muss.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hallo,
ich bin gerne bereit zu glauben, dass ich etwas Wesentliches übersehen habe; aber warum benutzt Du hier zwei verschiedene Variablen? Offenbar werden sie identisch verwendet, nur dass der selbe Code doppelt notiert werden muss.
Sorry, ich hatte die beim Testen uebrig gebliebenen redundanten Parts nicht vereinigt. So ist es dann kompakter:
var d,styles,p;
d=document.getElementById("absatz");
if(document.defaultView && document.defaultView.getComputedStyle)styles=document.defaultView.getComputedStyle(d,null);
else if(d.currentStyle)styles=d.currentStyle;if(styles)for(p in styles)document.write(p+" : "+styles[p]+"<br>");
MfG, Thomas
-
Hi,
Sorry, ich hatte die beim Testen uebrig gebliebenen redundanten Parts nicht vereinigt. So ist es dann kompakter:
ah, okay, danke :-) Darf ich noch folgende Optimierung vorschlagen:
var styles = (document.defaultView ...) ? ...getComputedStyle(d, null)
: (d.currentStyle) ? d.currentStyle
: return;
for (var p in styles) ...var d,styles,p;
(Nebenbei: Ich bevorzuge es, Variablen erst in ihrem benötigten Kontext zu deklarieren, d.h. in der Regel auch umgehend zu initialisieren.)
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hallo Cheatah!
: return;
Welcher Browser interpretiert denn so etwas Ekelerregendes?
Mozilla jedenfalls nicht.Grüße
Daniel
-
Hallo,
Darf ich noch folgende Optimierung vorschlagen:
Klar, es ging mir vorrangig um die zu erzeugende Ausgabe. Ich benutze auch ganz gern die Schreibweise mit Konditionaloperatoren, aber if-else-Konstrukte sind doch angenehmer lesbar.
(Nebenbei: Ich bevorzuge es, Variablen erst in ihrem benötigten Kontext zu deklarieren, d.h. in der Regel auch umgehend zu initialisieren.)
Ich bevorzuge die Angabe saemtlicher verwendeter Variablen an zentraler Stelle (global bzw. lokal) und initialisiere dann sofort, wenn bestimmte Startwerte erforderlich sind (am Anfang bekannte Objekte, vordefinierte Wahrheitswerte, spaetere Summen auf 0 setzen, Zaehler bei Bedarf vorbelegen usw.).
MfG, Thomas
-
-
-
-