구별 *, 오프셋, *의 - 클라이언트 - *, 스크롤

의 offsetWidth, offsetHeight 값 (폭 + 패딩 + 테두리 +의 스크롤 바)
offsetTop, 즉 offsetLeft (친 요소, 소자의 경계에서 측정 패딩 부모 요소로부터의 거리)을, 왼쪽 + marginLeft을

clientWidth 상기 clientHeight (폭 + 패딩, 스크롤바를 포함하지 않음)
의 clientTop, clientLeft (왼쪽 및 위쪽 경계의 폭, 즉 경계의 값은 통상 동일 - 왼쪽 - widht, TOP- 테두리 - 폭)


scrollWidth, scrollHeight (있는 경우 스크롤 바, clientWidth 협정 없음)
scrollTop, scrollLeft에 상기 슬라이더의 위치를 ​​설정하기위한

offsetParent 속성이 속성의 부모 요소 offsetParent가 널인 경우, 이러한 속성은 문서의 좌표, 상대적인 지정

// offsetLeft 전자와 offsetTop의 위치 계산 
기능 getElementPosition의 (e) {
     VAR X = 0, Y = 0 ,
     그동안 (E =! 널 ) {
        X + = e.offsetLeft;
        Y + = e.offsetTop;
        E = e.offsetParent;
    }
    반환 {
        X : X,
        Y : Y
    };
}

 

다시 그리기 환류 ( https://github.com/chenjigeng/blog/issues/4 )

브라우저 최적화하기 위해 수정의 수를 저장하는 큐를 사용합니다. 브라우저는 큐에 넣어 작업을 수정합니다, 또는 작업의 기간이 임계 값에 도달 할 때까지, 큐가 비어 있습니다. 그러나! 당신이 작업의 레이아웃 정보를 얻을 때 새로 고침이 대기열에 강제 될 때

// 오류의 예는 
기능 initP () {
     에 대한 합니다 (하자 I = 0; 나는 <paragraphs.length 내가 ++ ) {
        단락 [I] .style.width = box.offsetWidth + '픽셀' ;
    }
}

// 优化代码 
CONST 폭 = box.offsetWidth;
함수 initP는 () {
     위해 (나는 ++; 나는 <paragraphs.length I = 0하자 {)
        단락 [I] .style.width = 폭 + '픽셀' ;
    }
}