CSS 중 OffsetWidth, clientWidth, scrollWidth 및 Height

이 튜토리얼의 제목을 읽은 후 가장 먼저 떠오르는 질문은 offsetWidth, clientWidth 및 scrollWidth가 HTML의 너비를 반환한다는 것인데, 둘 사이의 차이점은 무엇입니까?

둘의 차이점은 웹페이지에서 차지하는 공간의 양입니다. 이 튜토리얼에서는 HTML 요소의 다양한 너비와 높이에 대해 알아봅니다.

오프셋 너비, 클라이언트 너비, 스크롤 너비

• offsetWidth - 실제 너비, 안쪽 여백, 테두리 및 스크롤 막대를 포함한 요소의 전체 너비(픽셀 단위)입니다. 너비에는 여백이 포함되지 않습니다. HTML 요소의 외부 너비입니다.

• clientWidth - 요소의 실제 너비 + 패딩을 반환합니다. 여백, 테두리 또는 스크롤 막대 너비는 포함되지 않습니다. HTML 요소의 내부 너비입니다.

• scrollWidth - 테두리, 여백, 스크롤 막대 등을 제외한 패딩을 포함하여 스크롤 가능한 콘텐츠의 전체 너비를 반환합니다.

문법

사용자는 다음 구문에 따라 JavaScript의 offsetWidth, clientWidth 및 scrollWidth 속성을 사용할 수 있습니다.

으아악

위 구문에서 요소는 HTML 요소이므로 너비를 찾아야 합니다.

예 1

아래 예시에서는 div 요소를 생성하고 텍스트 콘텐츠를 추가했습니다. 또한 div 요소에 고정 너비를 설정하고 CSS를 적용하여 가로 스크롤이 가능하도록 했습니다.

JavaScript에서는 div 요소에 액세스하고 offsetWidth, clientWidth 및 scrollWidth 속성을 사용하여 해당 너비를 가져옵니다. 출력에서 사용자는 offsetWidth가 330픽셀(실제 너비 300px + 왼쪽 패딩 10px + 오른쪽 패딩 10px + 왼쪽 테두리 5px + 오른쪽 테두리 5px)과 동일하다는 것을 확인할 수 있습니다. clientWidth는 테두리가 아닌 실제 너비와 패딩만 계산하므로 320픽셀과 같습니다. scrollWidth는 스크롤 가능한 콘텐츠의 너비를 측정하는 1549픽셀입니다.

으아악

예 2

아래 예에서는 첫 번째 예와 마찬가지로 div 요소에 텍스트 콘텐츠를 추가하고 가로로 스크롤 가능하게 만듭니다. 또한 사용자의 너비, 패딩 및 테두리 너비를 가져오기 위해 입력 필드를 만들었습니다.

JavaScript에서는 입력 값에 액세스하고 해당 값을 기반으로 HTML 요소의 스타일을 지정합니다.

출력에서 사용자는 입력 값을 입력하고 "너비 가져오기" 버튼을 클릭하여 요소의 너비를 다시 계산할 수 있습니다.

으아악

오프셋 높이, 클라이언트 높이, 스크롤 높이

offsetHeight, clientHeight 및 scrollHeight 속성은 offsetWidth, clientWidth 및 scrollWidth와 유사합니다.

• offsetHeight - 실제 높이, 패딩 및 테두리를 포함하여 요소의 전체 높이를 반환합니다. 요소의 외부 높이입니다

• clientHeight - 실제 높이와 패딩의 합을 반환합니다. 내부 높이입니다.

• scrollHeight - 패딩을 포함하여 스크롤 가능한 콘텐츠의 높이를 반환합니다.

문법

사용자는 다음 구문에 따라 offsetHeight, clientHeight 및 scrollHeight JavaScript 속성을 사용할 수 있습니다.

으아악

예 3

아래 예에서는 div 요소에 콘텐츠를 추가하고 세로로 스크롤되도록 Overflow-y를 설정했습니다. JavaScript에서는 HTML 요소의 다양한 높이를 얻기 위해 offsetHeight, clientHeight 및 scrollHeight 속성을 사용합니다.

출력에서 offsetHeight는 130px입니다. 이는 실제 높이 100px + 상단 패딩 10px + 하단 패딩 10px + 상단 테두리 5px + 하단 테두리 5px와 같습니다. 클라이언트 높이는 실제 너비와 패딩의 합인 120픽셀입니다. 스크롤 높이는 343픽셀이며, 이는 스크롤 가능한 콘텐츠의 높이와 같습니다.

으아악

이 튜토리얼에서는 offsetWidth, clientWidth 및 scrollWidth 속성을 사용하여 HTML 요소의 너비를 얻는 방법을 배웠습니다. 또한 HTML 요소의 다양한 높이를 반환하는 offsetHeight, clientHeight 및 scrollHeight 속성 간의 차이점을 배웠습니다.

위 내용은 CSS 중 OffsetWidth, clientWidth, scrollWidth 및 Height의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!