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

检查父元素是否有效的DOM页面

1 个答案: