높이와 너비는 웹 페이지의 레이아웃을 디자인할 때 가장 중요한 치수입니다.
'높이'는 물체의 위에서 아래까지의 길이 측정을 나타내고 '너비'는 물체의 한 쪽에서 다른 쪽까지의 너비를 나타냅니다. 이러한 요소는 창에서 개체 할당을 조정하는 데 도움이 됩니다. 자바스크립트에서 ' 키 ' 그리고 ' 너비 속성은 각각 'inner' 즉 'innerHeight/innerWidth' 및 'outer' 즉 'outerHeight/outerWidth'의 두 가지 범주로 더 분류됩니다.
이 글은 JavaScript에서 Window 'innerHeight' 속성의 목적과 작동에 대해 자세히 설명합니다.
창 'innerHeight' 속성은 JavaScript에서 무엇을 합니까?
“ 내부 높이 ” 속성은 위치 표시줄, 도구 모음, 메뉴 표시줄 등을 제외한 브라우저 창의 뷰포트 높이를 검색하는 '창' 개체와 연결됩니다. 또한 포함된 경우 가로 스크롤 막대의 높이도 포함합니다. 이 속성의 반환 값은 '레이아웃 뷰포트' 창, 즉 웹 페이지 콘텐츠를 표시하는 영역에서 가져옵니다.
기본 구문
window.innerHeight 또는 내부 높이
위 구문에 따르면 ' 내부 높이 ” 속성은 직접 또는 “window” 개체를 사용하여 쉽게 적용할 수 있습니다.
위에서 정의한 속성을 기본 구문을 사용하여 실제로 구현해 보겠습니다.
예제 1: 창 'innerHeight' 속성을 적용하여 브라우저 창의 뷰포트 높이 반환
이 예제에서는 'window' 개체와 함께 'innerHeight' 속성을 사용하여 브라우저 창의 뷰포트 높이를 검색합니다.
HTML 코드
먼저 아래에 명시된 코드를 살펴보십시오.
< h2 > Window innerHeight 속성 h2 >< 단추 온 클릭 = 'js펑크()' > 높이 얻기 단추 >
< 피 ID = '을 위한' > 피 >
위의 코드 라인에서:
- “ ” 태그는 레벨 2 소제목을 정의합니다.
- “ <버튼> ” 태그는 이벤트가 트리거될 때 “jsFunc()” 함수를 호출하는 “onclick” 이벤트가 있는 버튼을 나타냅니다.
- “ ” 태그는 적용된 “innerHeight” 속성의 반환 값을 표시하기 위해 할당된 ID “para”가 있는 빈 단락을 추가합니다.
자바스크립트 코드
이제 아래 주어진 코드로 진행하십시오.
< 스크립트 >기능 jsFunc ( ) {
허락하다 h = window.innerHeight;
문서.getElementById ( '을 위한' ) .innerHTML = '창의 innerHeight: ' + h;
}
스크립트 >
위의 코드 줄에서:
- 먼저 '라는 이름의 함수를 정의합니다. jsFunc() '.
- 정의에서 'h' 변수는 ' 내부 높이 ” 속성을 '창' 개체를 사용하여.
- 그 후 ' getElementById() ” 메서드를 사용하여 id “para”를 사용하여 추가된 빈 단락을 가져오고 현재 브라우저 창의 내부 높이를 표시합니다.
산출
위의 출력에서 볼 수 있듯이 현재 브라우저 창에는 뷰포트 높이(내부 높이)가 표시됩니다. 599픽셀 ” 버튼 클릭 시.
예제 2: 결합된 창 'innerHeight' 및 'innerWidth' 속성 적용
'innerHeight' 속성은 'innerWidth', 'outerWidth', 'outerHeight' 등과 같은 다른 치수 속성과 함께 구현할 수 있습니다. 이 시나리오에서는 ' innerWidth ' 재산.
HTML 코드
수정된 HTML 코드의 개요를 살펴보겠습니다.
< h2 > 창 innerHeight 및 innerWidth 속성 h2 >< 단추 온 클릭 = 'js펑크()' > 높이와 너비 얻기 단추 >
< 피 ID = '을 위한' > 피 >
여기에서 '