유효한 DOM 페이지에 대한 부모 요소 확인

부모 요소 너비에 맞는지 확인하려는 일부 HTML 요소가 있습니다. 기본적으로 자식 컨테이너 요소 중 부모 요소 너비를 초과하지 말아야합니다. 새로운 요소는이 규칙 페이지 정렬 붕괴를 위반하는 추가되는 경우, 작업 큰 HTML 페이지 및 여러 개발자들과유효한 DOM 페이지에 대한 부모 요소 확인

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

예를 들면 다음과 같습니다. 이 자식 요소의 유효성을 검사하고 DOM에서 페이지를 실행하여 요소가이 테스트를 통과하는지 확인하는 js가 있습니까?

출처

2013-01-21 Mehavel

당신은 정말이 문제를 처리하기 위해 CSS를 사용해야합니다. 구체적으로 말하면 'max-width'가 아니라'width'가 아닌 스킴을 사용하십시오. 어쨌든 작은 화면 친화적 인 디자인에 더 좋습니다. – Pointy

지금 우리는 CSS.just를 사용하여 유효성 검사가 가능한 js가 있는지 알고 싶어하므로 페이지가 커질 때 추가 자식 요소의 유효성을 검사하는 단위 테스트로 작동 할 수 있습니다. – Mehavel

자바 스크립트를 사용하면 안됩니다. 가장 좋은 해결책은 프로젝트에 적합한 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-21 05:16:23

유효한 DOM 페이지에 대한 부모 요소 확인

답변

관련 문제