Javascript中动态计算溢出量

我有一个conatiner div，它的高度和宽度都是相对固定的。我想通过Javascript计算出它的子元素在顶部、右侧、底部和左侧方向上超出容器div边缘的程度（如果有的话）。任何帮助都将不胜感激

这是

top

的代码：

var myDivEl = document.getElementById("my-div");
var divTop = myDivEl.getBoundingClientRect().top;

var descendants = myDivEl.getElementsByTagName("*");

var tops = [];
for (var i = 0, descendant; descendant = descendants[i]; ++i) {
   tops.push(descendant.getBoundingClientRect().top);
}

var minTop = Math.min.apply(Math, tops);

var diff = divTop - minTop;

更一般地说：

function getBoundingClientRectDiff(el, propName, minOrMax) {
    var propValue = el.getBoundingClientRect()[propName];

    var descendants = myDivEl.getElementsByTagName("*");

    var descendantPropValues = [];
    for (var i = 0, descendant; descendant = descendants[i]; ++i) {
       descendantPropValues.push(descendant.getBoundingClientRect()[propName]);
    }

    var extremePropValue = Math[minOrMax].apply(Math, descendantPropValues);

    return minOrMax === "Max" ? extremePropValue - propValue
                              : propValue - extremePropValue;
}

function getBoundingClientRectDiffs(el) {
    return {
        top: getBoundingClientRectDiff(el, "top", "Min"),
        right: getBoundingClientRectDiff(el, "right", "Max"),
        bottom: getBoundingClientRectDiff(el, "bottom", "Max"),
        left: getBoundingClientRectDiff(el, "left", "Min")
    };
}

// use like so:
var diffs = getBoundingClientRectDiffs(myDivEl);
console.log(diffs.top, diffs.right, diffs.bottom, diffs.left);

---

您还可以获得元素的宽度和scrollWidth或高度和scrollHeight属性之间的差异。

Domenic，我如何调整它以考虑子节点的显示属性？基本上，如果子级设置为显示：无；我不想在计算中包含它或它的任何子节点。@VinnyD，您应该在

for

循环中添加

if（genderant.style.display！=“none”）{}

，包装

genderantpropvalues.push（…）

。