Rufen Sie den Begrenzungsrahmen eines div-Elements ab: jQuery-Implementierungsmethode

Question

Ich möchte den Begrenzungsrahmen eines div-Elements über jQuery/JavaScript berechnen.

Ich habe den folgenden Code ausprobiert:

//Die linke Seite der Box
document.getElementById("myElement").offsetLeft;
//Top of the box
document.getElementById("myElement").offsetTop;
//rechte Seite der Box
document.getElementById("myElement").offsetLeft + document.getElementById("myElement").offsetWidth;
//Unterseite der Box
document.getElementById("myElement").offsetTop + document.getElementById("myElement").offsetHeight;

Es gibt einen Wert zurück. Ist dies der richtige Weg, um den Begrenzungsrahmen eines div-Elements über jQuery/JavaScript abzurufen?

Ich benötige etwas Ähnliches wie die Methode getBBox() Es werden die Werte x, y, width und height zurückgegeben. Wie erhalte ich außerdem den Begrenzungsrahmen eines div-Elements?

Answer 1

由于这是专门为jQuery标记的 -

$("#myElement")[0].getBoundingClientRect();

或者

$("#myElement").get(0).getBoundingClientRect();

(这两者在功能上是相同的，在一些旧浏览器中，.get() 稍微快一些)

请注意，如果您尝试通过jQuery调用来获取值，它将不会考虑任何css变换值，这可能会导致意外的结果...

注意2：在jQuery 3.0中，它已经改为使用适当的getBoundingClientRect()调用来进行自身的尺寸调用（请参见jQuery Core 3.0升级指南） - 这意味着其他jQuery答案最终将始终正确 - 但仅在使用新的jQuery版本时才正确 - 这就是为什么它被称为破坏性变更的原因...

Answer 2

你可以通过调用getBoundingClientRect方法来获取任何元素的边界框。

var rect = document.getElementById("myElement").getBoundingClientRect();

这将返回一个具有left、top、width和height字段的对象。