0

親要素の幅に収まるかどうかを検証したい HTML 要素がいくつかあります。基本的に、子コンテナ要素が親要素の幅を超えないようにします。例えば：

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

大きな html ページと複数の開発者が作業している場合、この規則に違反する新しい要素が追加されると、ページの配置が崩れます。この子要素を検証し、DOM でページを実行して、要素がこのテストに成功するかどうかを確認できる js はありますか

4

1 に答える 1

0

これには 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;
});
于 2013-01-21T05:16:23.550 に答える