CSS Sytle direkt ändern

[Henry]

Hallo,

wenn man global das Style ändern möchte gäbs zwar verschiedene Möglichkeiten mit append oder Queryselectorall+schleife. Ich hatte irgendwann auchmal eine Option genutzt die mir sinnvoll schien. Find edie im Moment aber leider nicht und hab daher mal neu gebastelt, bin nicht sicher ob die Grundidee aber die Gleiche ist.

<style id="stl1">
.xy{color:teal;}
</style>

<p class="xy">Hello World!</p>
<p id="p2">Hello World!</p>
<p class="xy">Hello World!</p>

<button onclick="alert(document.documentElement.outerHTML);">source</button>
<button onclick="stl1.innerHTML = '.xy{color:red;}'">change CSS</button>

Mir gehts darum, dass sich alle Elemente einer bestimmten Klasse ohne Anhänge des Doms oder Schleifen, ändern. Ist mein Ansatz OK, oder gibts ne sinnvollere/einfachere Möglichkeit?

Gruss
Henry