Mit JavaScript HTML- und SVG-Elementen Eigenschaften zuweisen

style vs. setAttribute

Keine Frage: Die arbeiten nicht gegeneinander.
Während mit style ausschließlich HTML-Elemente angesprochen werden können,
kann setAttribute auch XML/SVG-Elementen Eigenschaften zuweisen.

Beispiel für den Container div
rot orange	Ein Container mit der Hintergrundfarbe silver
Beispiel angewendet auf das SVG-Element rect style.backgroundColor=farbe
rot orange setAttribute("fill",farbe) gelb grün

Die für XML andere Syntax ist dafür entscheidend.
Diese Elemente können nicht mit color: oder background-color: ihre Eigenschaften erhalten. Dafür wird fill eingesetzt und dies ist wiederum nur mit setAttribute realisierbar.

Anmerkung: Da die Änderung der Hintergrundfarbe bzw. der Versuch textlich dokumentiert wird und beim MSIE die Ausgabe
obj_svgtspan.innerHTML = wert ;
im SVG-Element tspan nichts bewirkt, muss wieder eine Browserweiche her:
if (IE) MSIE(obj_svgtspan,hgf) ;
function MSIE(obj, wert){
obj.firstChild.nodeValue = wert ; }

Elemente des Beispiels:

33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68


<div class='demo'>

<table style="width: 424px; height: auto;" border="0" cellspacing="0" cellpadding="0">

 <tr><td colspan="2">Beispiel für den Container div</td></tr>

 <tr>            

  <td style="width: 130px;">

   <input id="b1" name="farbe" type="radio" value="red"/>rot

   <br /><input id="b2" name="farbe" type="radio" value="orange"/>orange

  </td>

  <td style="vertical-align:top;">

   <div id="Lex1" class="beispiel">Ein Container mit der Hintergrundfarbe 

     <span id="hgf">silver</span></div>

  </td>

 </tr>

 <tr style="height:48px;">

  <td colspan="2" style="vertical-align:bottom;">Beispiel angewendet auf das SVG-Element rect

   <br /><span style="font-size:12px;">style.backgroundColor=farbe</span>

  </td>

 </tr>

 <tr>

  <td>

   <input id="ib1" name="farbe" type="radio" value="red"/>rot

   <br /><input id="ib2" name="farbe" type="radio" value="orange"/>orange

   <br /><span style="font-size:12px;">setAttribute("fill",farbe)</span>

   <br /><input id="sb1" name="farbe" type="radio" value="#ff0"/>gelb

   <br /><input id="sb2" name="farbe" type="radio" value="#0f8"/>grün

  </td>

  <td>

<svg x="0" y="0" width="285" height="60" >

 <rect id="Lex2" fill="silver" x="0" y="0" width="290" height="60" />

 <text x="5" y="16" style="font-family:arial; font-size:14px;">SVG-Element rect mit der Füllfarbe: 

 <tspan id="svgt" x="5" y="32" >silver</tspan></text>

</svg>

  </td>

 </tr>

</table>

</div>

Der JavaScript-Bereich:

91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152


<script>

var BrowserName = navigator.userAgent;

var isIE = BrowserName.indexOf("Trident");

var isEdge = BrowserName.indexOf("Edge");

if ( isIE > 0 || isEdge > 0) IE = 1 ;

//1.Beispiel

var obj_lex1 = document.getElementById("Lex1") ;

var obj_b1 = document.getElementById("b1") ;

var obj_b2 = document.getElementById("b2") ;

var obj_hgf = document.getElementById("hgf") ;

//2.Beispiel

var obj_lex2 = document.getElementById("Lex2") ;

var obj_ib1 = document.getElementById("ib1") ;

var obj_ib2 = document.getElementById("ib2") ;

var obj_sb1 = document.getElementById("sb1") ;

var obj_sb2 = document.getElementById("sb2") ;

var obj_svgtspan = document.getElementById("svgt") ;



var hgf ;

window.addEventListener ('load', function () {

//1.

 obj_b1.onchange = function () {

    hgf = this.value ;

    obj_hgf.innerHTML = hgf;

    obj_lex1.style.backgroundColor = hgf ;

 }

 obj_b2.onchange = function () {

    hgf = this.value ;

    obj_hgf.innerHTML = hgf;

    obj_lex1.style.backgroundColor = hgf ;

 }

//2.

 obj_ib1.onchange = function () {

    hgf = this.value ;

    obj_svgtspan.innerHTML = "keine Ergebnisänderung";

    obj_lex2.style.backgroundColor = hgf ;

    if(IE) MSIE(obj_svgtspan,"keine Ergebnisänderung") ;

 }

 obj_ib2.onchange = function () {

    hgf = this.value ;

    obj_svgtspan.innerHTML = "keine Ergebnisänderung";

    obj_lex2.style.backgroundColor = hgf ;

    if(IE) MSIE(obj_svgtspan,"keine Ergebnisänderung") ;

 }

 obj_sb1.onchange = function () {

    hgf = this.value ;

    obj_svgtspan.innerHTML = hgf;

    obj_lex2.setAttribute("fill",hgf) ;

    if(IE) MSIE(obj_svgtspan,hgf) ;

 }

 obj_sb2.onchange = function () {

    hgf = this.value ;

    obj_svgtspan.innerHTML = hgf;

    obj_lex2.setAttribute("fill",hgf) ;

    if(IE) MSIE(obj_svgtspan,hgf) ;

 }

});

function MSIE(obj, wert){

obj.firstChild.nodeValue = wert ;

}



</script>