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
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
}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>