Question

I have some HTML elements which I want to validate whether they fit within their parent elements width. Basically, I dont want any of the child container elements to exceed the parent elements width. for example:

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

with a large html page and multiple developers working, if a new element is added which violates this rule, the page alignment collapse. is there an js where i can tell validate this child element, and run the page on DOM, to check if the element succeeds this test

Answer 1

You shouldn’t use javascript for it. The best solution is a good CSS pattern for your project.

But yes, you can validade the objects.

Something like this:

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

Using example:

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