Modifier le style par javascript

<style>
p {
font-family:arial;
font-weight:bold;
}
button {
</style>
Bouton 'image' <img src="http://www.dreams.metroeve.com/wp-content/uploads/2017/03/dreams.metroeve_unnamed-1.png" width="40" height="40" onclick="myColor1()"/> colorie le texte id="p2" en bleu<br/>
Bouton 'button' <button onclick="myColor2()">Color !</button> colorie le texte id="p2" en rouge<br/>
Bouton 'svg' <svg width="20" height="10" onclick="myColor3()"><rect width="20" height="10" fill="red"><animate attributename="fill" begin="0s" dur="2s" repeatcount="indefinite" values="red;green;blue;red"/></rect></svg> colorie le texte id="p2" en orange<br/>
Bouton 'button' <button onclick="myColor4()">texte</button> colorie le rectangle svg id="rect1" en rose

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>

<script>
function myColor1(){
document.getElementById("p2").style.color = "blue";
}
function myColor2(){
document.getElementById("p2").style.color = "red";
}
function myColor3(){
document.getElementById("p2").style.color = "orange";
}
function myColor4(){
document.getElementById("rect1").style.fill = "salmon";
}
function myColor5(){
document.getElementById("rect1").style.fill = "#C0C0C0";
}

</script>
<p>The paragraph above was changed by a script.</p>

<svg width="100" height="100"><rect width="100" height="100" id="rect1"/></svg>