Javascript keine Bibliothek Unterstützung DOM Manipulation wie von jQuery Äquivalent

Question

Ok Ich bin verwöhnt von meinen Bibliotheken vor allem jQuery. Was ich will, allein mit reinem JavaScript tun, ist das äquivalent von

$('#id').mouseover(function(){ 
var wide = $(this).width(); 
var high = $(this).height(); 

$('#id2').css({"position":wide+'px' high+'px'}).show(); 
}); 
$('#id').mouseout(function(){$('#id2').hide();}); 

Mein Ziel ist es zu haben, wenn ID über schwebte wird hat es ID2 an der rechten unteren Ecke des ID-Elements zeigen. Leider wäre ich in der Lage, dies alles schnell in jQuery einzurichten und ich bin ernsthaft davon verwöhnt, aber ich habe ein direktes Bedürfnis, dies ohne Bibliotheksunterstützung wie jQuery zu tun. Idealerweise würde ich gerne eine Klasse als Ersatz für IDs verwenden, aber von dem, was ich an JavaScript sammle, wird das nicht direkt unterstützt.

Answer 1

Hängt natürlich vom Styling Ihrer divs ab, also habe ich ein paar Beispiele für HTML eingefügt.

<div style="position: relative; height: 200px; width: 200px;"> 
    <div id="first" style="position: absolute"> 
     11111111111111111 
    </div> 
    <div id="second" style="position: absolute; display: none;"> 
     22222222222222222 
    </div> 
</div> 

<script type="text/javascript" language="javascript"> 
    var first = document.getElementById("first"); 
    first.onmouseover = function() { 
     var left = this.offsetLeft + this.offsetWidth; 
     var top = this.offsetTop + this.offsetHeight; 

     var second = document.getElementById("second"); 
     second.style.left = left + "px"; 
     second.style.top = top + "px"; 
     second.style.display = "block"; 
    } 
    first.onmouseout = function() { 
     document.getElementById("second").style.display = "none"; 
    } 
</script>