javascript没有库支持DOM操作，如jQuery Equivalent所示

好吧，我被我的库特别是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();});

---

我的最终目标是当ID悬停在上面时，让它在ID元素的右下角显示ID2。不幸的是，我能够在jquery中快速设置所有这些，我被它严重地宠坏了，但是我直接需要在没有诸如jquery之类的库支持的情况下这样做。理想情况下，我希望使用一个类来替换ID，但从我收集的信息来看，JavaScript本身并不完全支持这一点。

当然取决于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>

11111111111111111
22222222222222222
var first=document.getElementById（“first”）；
first.onmouseover=函数（）{
var left=this.offsetLeft+this.offsetWidth；
var top=this.offsetTop+this.offsetHeight；
var second=document.getElementById（“second”）；
second.style.left=左+像素；
second.style.top=top+px；
second.style.display=“block”；
}
first.onmouseout=函数（）{
document.getElementById（“第二”）.style.display=“无”；
}

如果你可以在jQuery中实现，那么你也可以在javascript中实现，因为jQuery就是javascript。你使用了大量的jQuery方法，这些方法高度使用跨浏览器切换（这是jQuery的最终目标，与尽可能多的浏览器兼容）。当然，你可以用vanilla js重新编写，但是如果你做得对的话，代码会膨胀到10倍甚至更多。是的，我知道这可能是通过JavaScript单独实现的，因为所有库都是由JavaScript组成的。然而，我被图书馆和制作过程中存在的捷径宠坏了，因此我可以快速开发这个概念，并对跨浏览器友好。然而，在这个概念中，我不允许使用任何库，所以我有点拘泥于如何使用其他库。@chris：研究库是一个好的开始。