检查有效 DOM 页面的父元素答案

【问题标题】：Check parent element for valid DOM page检查有效 DOM 页面的父元素
【发布时间】：2013-01-04 04:03:59
【问题描述】：

我有一些 HTML 元素，我想验证它们是否适合它们的父元素宽度。基本上，我不希望任何子容器元素超过父元素的宽度。例如：

 <div id="parent" style="width:100px;">
   <div id="child" style="width:120px;"> //wrong
</div>

对于大型 html 页面和多个开发人员工作，如果添加了违反此规则的新元素，页面对齐将崩溃。是否有一个 js 可以告诉我验证这个子元素，并在 DOM 上运行页面，以检查该元素是否通过了这个测试

【问题讨论】：

你真的应该使用 CSS 来处理这个问题。具体来说，使用涉及max-width 而不是width 的方案。无论如何，它更适合小屏幕设计。
目前我们正在使用CSS。只是想知道是否存在可以验证的js，以便在页面增长时它可以作为单元测试来验证更多的子元素。

标签： javascript html dom

【解决方案1】：

您不应该为此使用 javascript。最好的解决方案是为您的项目提供良好的 CSS 模式。

但是是的，您可以验证对象。

类似这样的：

function validateParent(element, prop, callback) {
  var parentProp = element.parentElement.style[prop];
  var childProp = element.style[prop];
  if(parseFloat(childProp) > parseFloat(parentProp)) {
    // do something here like execute the callback
    if(typeof callback === 'function') {
      callback.call(element, prop, parentProp);
    }
  }
}

使用示例：

// make the children value equals the parent
validateParent(document.getElementById('foo'), 'width', function(prop, val) {
  this.style[prop] = val;
});
// Dispatch an alert
validateParent(document.getElementById('foo'), 'width', function(prop, val) {
  alert('The value from ' + this.id + ' is bigger then it parent, that is ' + val;
});

【讨论】：