javascript - 检查有效 DOM 页面的父元素

Question

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

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

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

Answer 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;
});