javascript нет библиотеки поддерживает DOM манипуляции, как показано JQuery эквивалентным

Question

Хорошо, я избалован моими библиотеками, особенно jQuery. То, что я хочу сделать только с чистым JavaScript, эквивалентно

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

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

Моя конечная цель состоит в том, чтобы при наведении указателя на идентификатор отображался идентификатор ID2 в правом нижнем углу элемента идентификатора. К сожалению, я смог бы быстро все это настроить в jquery, и я серьезно испорчен этим, но у меня есть прямая необходимость сделать это без поддержки библиотеки, такой как jquery. В идеале я хотел бы использовать класс для замены идентификаторов, но из того, что я собрал, сам по себе JavaScript не поддерживает это напрямую.

Answer 1

Конечно, зависит от стиля ваших div'ов, поэтому я добавил сюда пример HTML-кода.

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