CSS Eigenschaften ändern.
Hallo alle zusammen,
ich habe eine wahrscheinlich recht einfache frage für euch aber ich verzweifle gerade dran.
Ich möchte gerne folgende Zeile in der CSS Datei dynamisch anpassen:
Kann mir einer sagen wie ich da dran komme?
MFG Sven
Kommentar abgeben zu diesen Beitrag/Code ?
background: rgb(30, 59, 63);
und
section:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(30, 59, 63);
mix-blend-mode: hue;
animation: animate 20s linear infinite
}Dann hier klicken
Der hier verwendete Code
<style>
div{
height:100px;
position:absolute;
top:0;
font-size:60px;
font-weight:900;
padding-top:30px;
text-align:center;
width:100%;
display:block;
}
section:before{
content: '';
position: absolute;
top: 100px;
left: 0;
width: 100%;
height: calc(100% - 100px);
background: rgb(30, 59, 63);
mix-blend-mode: hue;
animation: animate 20s linear infinite
}
</style>
<div></div>
<section>
hallo
</section>
<script>
hea=document.getElementsByTagName('style')[0];
helper=hea.innerHTML;
let para = document.querySelector('section');
let compStyles = window.getComputedStyle(para, ':before');
para.innerHTML='Start Color '+compStyles.backgroundColor;
function weiter(r,g,b){
if(r<=0){var r=255;}
if(g>=255){var g=0;}
if(b>=255){var b=0;}
document.getElementsByTagName('div')[0].innerHTML= compStyles.backgroundColor;
hea.innerHTML=helper+'section:before{background:rgba('+r+','+g+','+b+')}';
setTimeout(function(){r--;},35)
setTimeout(function(){g++;},55)
setTimeout(function(){b++;weiter(r,g,b)},95)
}
weiter(255,122,0)
</script>