Für einen direkten Zugriff auf Attribute und Eigenschaften stehen
folgende Methoden zur Verfügung:
-
getAttributes()
Diese Methode liefert eine Liste der Attributknoten eines
Elementknotens zurück. Die Länge dieser Liste, d.h. die Anzahl der gefundenen
Attribute kann durch die Methode getLength() ermittelt werden.
Auf einzelne Elemente dieser Liste können Sie mit Hilfe der Methode
item() zugreifen.
Siehe auch getElementsByTagName().
-
getAttribute()
Diese Methode liefert den Wert eines bestimmten Attributknotens zurück.
Dabei wird der Attributname als Parameter übergeben.
-
getStyle()
Rückgabewerte dieser Methode ist eine Liste, die alle Style-Eigenschaften enthält,
die durch das Attribut style für ein Element definiert sind.
Die Länge dieser Liste, d.h. die Anzahl der gefundenen
Attribute kann durch die Methode getLength() ermittelt werden.
Auf einzelne Elemente dieser Liste können Sie mit Hilfe der Methode
item() zugreifen.
Siehe auch getElementsByTagName().
Beachten Sie: Wenn die Style-Eigenschaften
in einem externen Style-Sheet definiert sind, ist überhaupt kein Zugriff auf die Eigenschaften
möglich.
Wenn die Style-Eigenschaften mit Hilfe des style-Elements
im defs-Bereich des
SVG Dokuments definiert sind, ist der lesende Zugriff mit getStyle()
nicht möglich.
In diesem Fall müssen Sie den Textknoten des style-Elements
auslesen.
-
getPropertyValue()
Lieferte den Wert einer bestimmten Eigenschaft zurück, die innerhalb der Liste aller
Style-Eigenschaften gesetzt ist. Daher ist diese Methode auf den Rückgabewert der Methode
getStyle() anzuwenden. Erwartet den Namen der Eigenschaft
(Zeichenkette) als Parameter.
-
getCssText()
Liefert die komplette Liste aller Style-Eigenschaften bzw. den gesamten Wert (die gesamte
Zeichenkette) des style-Attributs zurück. Diese Methode ist
ebenfalls auf den Rückgabewert der Methode
getStyle() anzuwenden.
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="440px" height="80x"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Javascript und SVG</title>
<desc>Javascript: Methoden für den Zugriff auf
Attribute und Eigenschaften.</desc>
<defs>
<!-- der Script Bereich -->
<script type="text/javascript">
<![CDATA[
function attr(){
var document = evt.getTarget().getOwnerDocument();
var rechteck = document.getElementById('rechteck');
var rect_attr = rechteck.getAttributes();
var rect_attr_anz = rechteck.getAttributes().getLength();
alert("Alle Attribute des Rechtecks: " + rect_attr +
"\nAnzahl aller Attribute: " + rect_attr_anz);
for(var i = 0; i < rect_attr_anz; i++){
alert("Attribut" + i + " : " +
rect_attr.item(i).getNodeName() +
" = " +
rect_attr.item(i).getNodeValue() +
"\n");
}
}
function attr2(){
var document = evt.getTarget().getOwnerDocument();
var rechteck = document.getElementById('rechteck');
var r_id = rechteck.getAttribute('id');
var r_x = rechteck.getAttribute('x');
var r_y = rechteck.getAttribute('y');
var r_width = rechteck.getAttribute('width');
var r_height = rechteck.getAttribute('height');
var r_rx = rechteck.getAttribute('rx');
var r_ry = rechteck.getAttribute('ry');
var r_style = rechteck.getAttribute('style');
alert("Alle Attribute des Rechtecks\n" +
"id = " + r_id + "\n" +
"x = " + r_x + "\n" +
"y = " + r_y + "\n" +
"width = " + r_width + "\n" +
"height = " + r_height + "\n" +
"rx = " + r_rx + "\n" +
"ry = " + r_ry + "\n" +
"style = " + r_style);
}
function prop1(){
var document = evt.getTarget().getOwnerDocument();
var rechteck = document.getElementById('rechteck');
var r_prop = rechteck.getStyle();
var r_prop_anz = rechteck.getStyle().getLength();
alert("Alle Eigenschaften des Rechtecks: " + r_prop +
"\nAnzahl aller Eigenschaften: " + r_prop_anz);
for(var i = 0; i < r_prop_anz; i++){
var prop_name = rechteck.getStyle().item(i);
var prop_wert = rechteck.getStyle().getPropertyValue(prop_name);
alert("Eigenschaft" + i + " : " +
prop_name +
" = " +
prop_wert);
}
}
function prop2(){
var document = evt.getTarget().getOwnerDocument();
var rechteck = document.getElementById('rechteck');
var r_csstext = rechteck.getStyle().getCssText();
alert("Der Wert des style-Attributs innerhalb des Rechtecks:\n\t"
+ r_csstext);
}
]]>
</script>
<!-- Styles und Filter -->
<style type="text/css">
<![CDATA[
text {font-family:Verdana,sans-serif; font-size:12px;
font-weight:bold;}
text.normal {font-weight:normal;font-size:14px;}
]]>
</style>
<filter id="filter" x="-.3" y="-.3" width="1.9" height="1.9">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"
result="out1" />
<feOffset dx="2" dy="2"
result="out2" />
<feSpecularLighting in="out1"
surfaceScale="5" specularConstant=".75"
specularExponent="20" lighting-color="#999999">
<fePointLight x="-100" y="-100" z="100"/>
</feSpecularLighting>
<feComposite in2="SourceAlpha" operator="in"
result="out3"/>
<feComposite in="SourceGraphic" in2="out3"
operator="arithmetic" k1="0" k2="1" k3="1" k4="0"
result="out4"/>
<feMerge>
<feMergeNode in="out2"/>
<feMergeNode in="out4"/>
</feMerge>
</filter>
<!-- der Button -->
<g id="button" style="filter:url(#filter)">
<rect id="rechteck" x="40" y="70" width="80" height="20"
rx="5" ry="5"
style="fill:#33cc33; stroke:black;" />
<text id="txt" x="58" y="84">onclick</text>
</g>
</defs>
<!-- die Instanzen des Buttons -->
<use id="usebut1" xlink:href="#button" x="-10" y="-50"
onclick="attr();" />
<use id="usebut1" xlink:href="#button" x="90" y="-50"
onclick="attr2();" />
<use id="usebut1" xlink:href="#button" x="190" y="-50"
onclick="prop1();" />
<use id="usebut1" xlink:href="#button" x="290" y="-50"
onclick="prop2();" />
<!-- Hilfstexte -->
<text x="35" y="65" class="normal">Attribute 1</text>
<text x="135" y="65" class="normal">Attribute 2</text>
<text x="235" y="65" class="normal">Propertys 1</text>
<text x="335" y="65" class="normal">Propertys 2</text>
</svg>
Im obigen Beispiel sind vier Javascript-Funktionen
definiert, die jeweils durch einen Klick auf den zugehörigen Button ausgelöst werden.
Innerhalb dieser Funktionen wird mit Hilfe
der in diesem Unterkapitel vorgestellten Methoden, auf die Attribute und Eigenschaften
des rect-Elements mit der ID rechteck zugegriffen.
Dazu wird in der zweiten Zeile jeder Funktion mit Hilfe der Methode
getElementById() das Objekt rechteck erzeugt, welches das entsprechende
rect-Element repräsentiert.
In der ersten Funktion attr() wird die Methode
getAttributes() verwendet, die eine Liste aller Attribute
(object NamedNodeMap) zurückliefert.
Danach wird die Länge dieser Liste, d.h. die Anzahl der Elemente,
mit getLength() ermittelt. Die beiden Rückgabewerte werden darauf
in einem alert-Fenster angezeigt.
Hiernach wird eine for-Schleife verwendet, für die als Endwert die Anzahl der
Elemente festgelegt ist. In jedem der (daraus resultierenden) acht
Schleifendurchläufe wird zuerst durch Verwendung der Methode item() und der
Methode getNodeName() der Name des jeweiligen Attributs, und dann ebenfalls
durch die Methode item() und
der Methode getNodeValue() der
jeweilige Wert zu diesem Attribut ermittelt. Beide Rückgabewerte werden
in jedem Schleifendurchlauf innerhalb eines alert-Fensters
angezeigt.
In der zweiten Funktion attr2() wird mit Hilfe der Methode
getAttribut() der Wert jedes einzelnen Attributs ermittelt.
Alle Werte werden dann, zusammen mit den
Attributnamen in einem alert-Fenster ausgegeben.
Innerhalb der dritten Funktion prop1() wird durch die
Methode getStyle() zuerst
eine Liste mit allen Style-Eigenschaften erzeugt (object CSSStyleDeclaration).
Hiernach wird mit getLength() die Anzahl der Style-Eigenschaften in dieser
Liste ermittelt. Beide Werte werden in einem alert-Fenster
ausgegeben.
Darauf wird wieder eine for-Schleife verwendet, um in jedem Schleifendurchlauf
durch die Methode item() den Namen der Eigenschaft und, ebenfalls mit der
Methode item(), aber zusätzlich mit der
Methode getPropertyValue(), die als Parameter den
jeweiligen Eigenschaftsnamen verwendet, den Wert dieser Eigenschaft zu ermitteln.
Beide Rückgabewerte werden in jedem Schleifendurchlauf innerhalb eines
alert-Fensters angezeigt.
In der vierten Funktion prop2() ermittelt die
Methode getCssText() den
Wert des Attributs style,
d.h. die gesamte CSS-Zeichenkette. Dieser Wert wird dann in einem
alert-Fenster ausgegeben.
|