화면 객체
화면의 높이와 너비 (해상도)
screen.width // wide screen.height // high screen.availwidth // 화면을 사용하여 시스템 구성 요소의 높이 후 값을 빼면 화면을 사용하여 시스템 구성 요소의 픽셀 폭을 빼낼 수 있습니다.
창 객체
창 위치와 크기를 얻으십시오
Window.screentop // 창 상단에서 화면 상단에서 거리의 거리 .ScreenLeft // 화면의 왼쪽에서 화면 창의 왼쪽까지의 거리 // Window Alert의 뷰 포인트 너비 (Window.innerWidth); // chrome 1366 ff 1366 IE 1366 Window.innerHeight // 창의 뷰 포인트의 높이이 값은 브라우저에 메뉴 표시 줄 등을 표시하는 것과 같은 요소와 관련이 있습니다 (window.innerHeight); // chrome 643 ff 657 IE 673Window.outerWidth // 브라우저 창 자체의 너비 (가시 영역 너비 + 브라우저 테두리 너비) 경고 (Window.outerWidth); // chrome 1366 FF 1382 IE 1382 // 크롬이 최대화되면 브라우저 창에 테두리 너비가 없으며 최대화되지 않으면 8px 테두리 너비 // ff 및 즉, 아래, 왼쪽 및 오른쪽 창이 있습니다. // Chrome 728 FF 744 IE 744
요소 객체
요소 객체의 다양한 높이와 너비를 도입하기 전에 박스 모델을 설명해야합니다.
기본 상자 모델 박스 크기 : 컨텐츠 박스;
boxwidth = 2*마진 + 2*테두리 + 2*패딩 + widthboxHeight = 2*마진 + 2*테두리 + 2*패딩 + 높이
스크롤 바가 나타나지 않으면
바디 {마진 : 0;}#demo {너비 : 100px; 높이 : 100px; 패딩 : 10px; 국경 : 20px; 마진 : 30px; 배경색 : 빨간색;} <div id = "demo"> 123456789 123456789 </div>ClientWidth : 페이지에서 콘텐츠의 가시 너비를 반환합니다 (국경, 여백 또는 스크롤 바 제외)
ClientHeight : 페이지에서 컨텐츠의 가시 높이를 반환합니다 (국경, 여백 또는 스크롤 바 제외)
clientWidth = 2*패딩 + 너비 -ScrollBarwidth console.log (document.getElementById ( 'demo'). clientWidth); // 120이 시점에서 ScrollBarWidth = 0ClientHeight = 2*Padding + Height -ScrollBarheight Console.Log (Document.GetElementById ( 'Demo'). ClientHeight); // 120이 시점에서 scrollbarwidth = 0
OffsetWidth : 테두리 및 채우기를 포함하여 요소의 너비를 반환하지만 여백은 포함되지 않습니다.
Offestheight : 경계 및 충전물을 포함한 요소의 높이를 반환하지만 여백은 포함되지 않습니다.
OffsetWidth = 2*Portle + 2*Padding + Width Console.Log (Document.GetElementById ( 'Demo'). OffsetWidth) // 160offSetHeight = 2*Portle + 2*Padding + Height Console.Log (Document.GetElementById ( 'Demo'). Offsetheight) // 160
OffsetLeft : 레이아웃 또는 오프셋 레프트 속성에 의해 지정된 부모 좌표에 대해 객체의 계산 된 왼쪽 위치를 가져옵니다.
OffsetTop : 오프셋 탑 속성에 의해 지정된 레이아웃 또는 상위 좌표에 대해 객체의 계산 된 상단 위치를 가져옵니다.
console.log (document.getElementById ( 'demo'). offsetLeft) //30console.log(document.getElementById('demo').offsetTop) // 30스크롤 바가 나타나면
신체 {마진 : 0; 패딩 : 20px; 너비 : 1000px; 높이 : 500px;} <div id = "demo"> 123456789123456789 </div>scrollwidth : 요소의 전체 너비를 반환합니다 (스크롤 막대가있는 숨겨진 장소 포함)
ScrollHeight : 전체 요소의 높이를 반환합니다 (스크롤 바로 숨겨진 장소 포함)
scrollwidth = 2*패딩 + 너비 console.log (document.body.scrollwidth) // 1040scrollheight = 2*패딩 + 너비 console.log (document.body.scrollheight) // 540
SCROLLTOP : 스크롤 블록 아래로 미끄러질 때 요소 숨겨진 컨텐츠의 높이. 설정하지 않으면 기본값은 0이고 스크롤 블록 스크롤로 값이 변경됩니다.
scrollleft : 스크롤 블록을 오른쪽으로 슬라이딩 할 때 요소 숨겨진 컨텐츠의 너비. 설정하지 않으면 기본값은 0이고 스크롤 블록 스크롤로 값이 변경됩니다.
이벤트 객체
이벤트 객체는 이벤트가 발생하는 요소, 키보드 키의 상태, 마우스의 위치 및 마우스 버튼의 상태와 같은 이벤트의 상태를 나타냅니다.
event.pagex : 전체 페이지의 좌표와 관련하여 페이지의 왼쪽 상단은 좌표의 원점에서 마우스가 위치한 지점까지의 수평 거리입니다 (IE8은 지원하지 않음).
event.pagey : 전체 페이지의 좌표와 관련하여 페이지의 왼쪽 상단은 좌표의 원점에서 마우스가 위치한 지점까지의 수직 거리입니다 (IE8에서 지원하지 않음).
event.clientx : 브라우저 시각 영역의 왼쪽 상단 모서리를 좌표의 원점에서 마우스가 위치한 지점까지의 수평 거리는 브라우저 시각 영역의 상단 모서리를 사용하여 마우스가 위치한 지점까지의 수평 거리를 사용하여 상대 시각 영역의 좌표.
Clienty : 브라우저 시각 영역의 왼쪽 상단 모서리를 좌표 원점에서 마우스가 위치한 지점까지의 수직 거리로 사용하는 상대 시각 영역의 좌표, 브라우저 원점의 왼쪽 상단 모서리를 좌표 원점에서 마우스가 위치한 지점까지 사용합니다.
event.screenx : 컴퓨터 화면의 좌표와 관련하여 좌표 원점에서 마우스가 위치한 지점까지의 수평 거리는 좌표 원점에서 마우스가있는 지점까지의 수평 거리를 사용합니다.
event.screeny : 컴퓨터 화면의 좌표와 관련하여 좌표 원점에서 마우스가 위치한 지점까지의 수직 거리, 화면의 왼쪽 상단 코너를 좌표 원점에서 마우스가 위치한 지점까지의 수직 거리로 사용합니다.
event.offsetx : 자체 좌표에 비해 자체 패딩의 왼쪽 상단 원점에서 마우스가 위치한 지점까지의 수평 거리는 좌표의 좌표 원점에서 마우스가 위치한 지점까지의 수평 거리에 기초합니다.
Event.OffSety : 자체 좌표와 관련하여 자체 패딩의 왼쪽 상단 원점에서 마우스가 위치한 지점까지의 수평 거리는 좌표 원점으로부터의 수평 거리에 기초합니다.
JavaScript에서 웹 페이지의 다양한 높이 및 너비 및 위치를 얻는 방법에 대한 위의 요약은 편집기가 공유하는 전체 컨텐츠입니다. 나는 그것이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원하기를 바랍니다.