javascript - 获取元素约束

Question

我最近一直在处理非常嵌套的 HTML 元素。有时，元素的大小受几个级别或更多级别的父元素的限制。找到约束可能很困难。

例如，我希望视频随屏幕尺寸缩放，但超过大约 1200 像素的宽度时，高度会达到最大值。在花了 20 分钟梳理检查器中的父层后，我发现父 div 上六层，在该 div 规则列表的底部，是最大高度约束。现在我可以继续工作了。

有没有更快的方法找到约束元素的规则？我喜欢 $('element').nearestHeightConstraint() 之类的 jquery 方法。

Answer 1

这应该适用于最大高度:

$.fn.nearestHeightConstraint = function(){
    if(parseInt(this.css('max-height'))){
        return this.css('max-height');
    }else{
        var p = this.parent();
        if(this.nodeType != 'body' && p.length){
            return p.nearestHeightConstraint();
        }else{
            return null; // not found
        }
    }
}

示例:http://jsfiddle.net/anxhwvv7/