자바 스크립트 BOM 논문 재단 기록

A : BOM의 의미 :

1. BOM 무엇입니까?
DOM을 조작의 API (인터페이스 / 메소드 / 속성) HTML은 태그의 집합입니다
BOM 운영 브라우저 API (인터페이스 / 메소드 / 속성)의 집합입니다

2.BOM 일반적인 객체
창 : 브라우저 윈도우의 대표
주 : 창은 BOM의 대상이며, (세계) 최고 대상
네비게이터 : 우리는 사용자의 현재를 확인할 수 있습니다 네비게이터하여 현재 브라우저 대신 정보 어떤 브라우저
위치 : 정보의 브라우저의 주소 표시 줄 대신, 우리가 설정하거나 위치를 통해 현재의 주소 정보를 얻을 수있을 것입니다
역사 : 이것은 새로 고침 / / 다음에 달성하기 위해 단계별로 브라우저 기록 정보, 역사를 의미
위해 :주의 사항 개인 정보 보호 고려 사항, 우리는 현재의 역사 얻을 수있는 모든 사용자의 역사를 얻을 수없는
화면 : 정보를 사용자의 화면 대신

II는 : 여러 가지 방법으로 폭과 높이 요소를 가져옵니다

1. getComputedStyle하여 폭 및 높이 위젯
테두리없이 1.1 획득 폭과 높이를 패딩
1.2 것은 얻기 위해 CSS의 선로 폭과 높이에 설치 될 수있다 폭과 높이를 취득 할 수있는
설정을 지원하지 않으므로, 1.3 지원 액세스
1.4 지원 IE9 위 브라우저

    VAR oDiv = document.getElementById를 ( "상자" );
    // oDiv.style.width = "166px"; 
    // oDiv.style.height = "166px"; 
    var에 스타일 = getComputedStyle (oDiv);
    // style.width = "166px"; 
    // style.height = "166px"; 
    CONSOLE.LOG (style.width); 
    CONSOLE.LOG (style.height);

2. 폭을 얻고 높이 currentStyle 의해 특성
테두리 패딩없이 2.1 획득 폭과 높이
폭과 높이를 얻기 위해 라인 폭과 높이 CSS로 제공 될 수있다 획득 될 수 2.2
2.3 지원 받기 설정 될 수
2.4 이하 IE9 지원 브라우저

 VAR oDiv = document.getElementById를 ( "상자" );
    // oDiv.style.width = "166px"; 
    // oDiv.style.height = "166px"; 
    var에 스타일 = oDiv.currentStyle; 
    style.width = "166px" ; 
    style.height = "166px" ;
    // 을 console.log (스타일); 
    CONSOLE.LOG (style.width); 
    CONSOLE.LOG (style.height);

스타일 속성에 의해 폭과 높이를 취득합니다
3.1하는 테두리와 패딩없이, 폭과 높이를 가져옵니다
만 라인의 폭과 높이 설정을 얻을 수 있습니다 3.2, 폭과 높이 CSS 설정을 얻을 수없는
3.3 얻기 위해 설정 될 수 있습니다
3.4 고급 낮은 수준의 브라우저 지원

 VAR oDiv = document.getElementById를 ( "상자" ); 
    oDiv.style.width = "166px" ; 
    oDiv.style.height = "166px" ; 
    CONSOLE.LOG (oDiv.style.width); 
    CONSOLE.LOG (oDiv.style.height);

4.offsetWidth과는 offsetHeight
4.1 하이 취득한 다양한 포함 테두리 + 패딩 + 폭과 소자의 높이
4.2 폭을 취득 할 수 있고, 높이 설정도 폭과 높이 설정 인라인 CSS를 얻을 수
지지체를 얻을 4.3, 설정을 지원하지 않는
4.4 고급 저레벨 브라우저 지원

var에 복장 = document.getElementById를 ( "상자" );
    // oDiv.offsetWidth = "166px"; 
    // oDiv.offsetHeight = "166px"; 
    oDiv.style.width = "166px" ; 
    oDiv.style.height = "166px" ; 
    CONSOLE.LOG (oDiv.offsetWidth); 
    CONSOLE.LOG (oDiv.offsetHeight);

요약 :

1.getComputedStyle / currentStyle / 스타일의
폭과 높이가 테두리 패딩없이 획득
2.offsetWidth /는 offsetHeight의
너비 높은 테두리를 획득하는 단계를 포함하는 패딩

3.getComputedStyle / currentStyle / offsetXXX
에만 지원을받을 수, 설정을 지원하지 않습니다
4.style을
얻을 수 있습니다, 당신은 또한 설정할 수 있습니다

5.getComputedStyle / currentStyle / offsetXXX
라인 내에 취득 할 수 있고, 또한 체인 인라인 스타일 얻을 수
6.style를
인라인 스타일을 수득

세 : 방법 위치의 요소를 얻기

offsetLeft offsetTop 작업 및
제 포지셔닝 부재 조상의 소자들 사이의 위치 오프셋을 취득
조상 소자가 배치되지 않은 경우 본체는 위치 오프셋 취득

offsetParent 역할 :

제 1 위치 상위의 요소를 얻기
요소 위치 조상이없는 경우는 도착하는 본체는

네 : 클라이언트 속성

1.offsetWidth = + 폭 + 패딩 테두리
는 offsetHeight = + 높이 + 패딩 테두리
2.clientWidth 폭 = + 패딩
clientHeight = 높이 패딩 +

3 offsetLeft / offsetTop : 제 1 시프트 위치 조상 체 사이의 거리를 위치 ||

의 clientTop 4 clientLeft / : 범위와 왼쪽 테두리의 위쪽 테두리

자바 스크립트 BOM 논문 재단 기록

추천