Reading from the DOM in Mithril

by basti1012

HTML

<div id="alert">
<div id="kopf" style="padding-top:5px;">
<center>Das ist ein Alert</center></div>
<div id="bild"></div>
<div id="inhalt"></div>
<button id="close">Schliessen</button></div>
 




<div id="te"></div>

CSS

#dropjs{
animation: drop 4s  infinite linear;//alternate
}

@keyframes drop {
0%{top: -180px;opacity:1;}
90% { top: 50px;opacity:1;}
100% { top: 50px;opacity:0;}
}

Babel + JSX

var style='body {height: 1px; min-height: 100vh; display: flex; align-items: center; justify-content: center}#alert{ display: flex; flex-direction: column; align-items: center; justify-content: flex-start;padding-bottom:2%;height:50%;width:50%;border: 1px solid black;box-shadow : 0 0 1em black;background:#aaaaaa;}'
+'button {background-color: yellow;}'

+'#inhalt{width:90%;max-height:20%;background:red;} ' 

+'#kopf{width:100%;height:10%;background:blue;}'
 
 +'#bild{background:green;width:90%;height:60%;}'
 
+' ';
 
$(' <style type="text/css">' + style + '</style>').appendTo($('head'));
 document.getElementById('inhalt').innerHTML='hallo das  ist der text';
var g=document.querySelector('#bild').offsetHeight;
f=g/3;
 
 
 document.getElementById('bild').innerHTML='<div id="kreis style="position:absolute;"><img src="http://www.mediaevent.de/javascript/img/circle.png"  width="'+g+'" height="'+g+'"alt="circle"></div> <div id="dropjs" style="position:relative;left:'+f+'px;"><img src="https://www.mediaevent.de/javascript/img/drop.png" width="'+f+'" height="'+g+'" alt="drop"></div>';





 /*
  document.getElementById('te').innerHTML='  <div class="demo flexrow"><div style="text-align: center;position: relative;"><span id="circlejs" style="position:absolute;left:0"><img src="https://www.mediaevent.de/javascript/img/circle.png" width="246" height="246" alt="circle"></span><span id="dropjs"style="position:absolute;top:80px;left:0px"><img src="https://www.mediaevent.de/javascript/img/drop.png" width="66" height="111" alt="drop"></span></div></div> ';
 
  
 //$('#drop').animate (	{ top: "70px" }, 	{ duration: 3000 });
 //$("#circle").animate({top: "1300px"},3000); 
 */