JS 브 라 우 저 와 화면 너비 의 고등 정 보 를 가 져 오 는 실현 방향 및 코드

4856 단어 JS브 라 우 저화면 너비
웹 페이지 보 이 는 영역 너비:document.body.clientWidth 웹 페이지 보 이 는 영역 높이:document.body.clientHeight 웹 페이지 보 이 는 영역 너비:document.body.offsetWidth(사 이 드 라인 의 너비 포함)웹 페이지 보 이 는 영역 높이:document.body.offsetHeight(사 이 드 라인 의 너비 포함)웹 페이지 본문 전문 너비:document.body.scrollWidth 웹 페이지 본문 전문 높이:document.body.scrollHeight 네트워크페이지 가 말 린 높이:document.body.scrollTop 페이지 가 말 린 왼쪽:document.body.scrollLeft 페이지 본문 부분:window.screenTop 페이지 본문 부분 왼쪽:window.screenLeft 화면 해상도 가 높 음:window.screen.height 화면 해상도 너비:window.screen.width 화면 사용 가능 한 작업 영역 높이:window.screen.availHeight 화면 사용 가능 한 작업 영역 너비:window.screen.availWidth HTML 정확 한 위치:scrollLeft,scrollWidth,client Width,offsetWidth scrollHeight:대상 의 스크롤 높이 를 가 져 옵 니 다.scrollLeft:대상 의 왼쪽 경계 와 창 에서 현재 보 이 는 내용 의 가장 왼쪽 끝 사이 의 거 리 를 설정 하거나 가 져 옵 니 다 scrollTop:대상 의 맨 위 와 창 에서 보 이 는 내용 의 맨 위 사이 의 거 리 를 설정 하거나 가 져 옵 니 다 scrollWidth:대상 의 스크롤 폭 offset Height:대상 이 지면 이나 부모 좌표 offset Parent 속성 에 따라 지정 한 부모 좌표 의 높이 off 를 가 져 옵 니 다.setLeft:대상 이 지면 이나 offsetParent 속성 에 따라 지정 한 부모 좌 표를 가 져 오 는 계산 왼쪽 위치 offsetTop:대상 이 지면 이나 offsetTop 속성 에 따라 지정 한 부모 좌 표를 가 져 오 는 계산 상단 위치 event.clientX 상대 문서 의 수평 좌표 event.clientY 상대 문서 의 수직 좌표 event.offsetX 상대 용기 의 수평 좌표 event.offsetY 상대용기 의 수직 좌표 document.documentElement.scrollTop 수직 방향 으로 굴 러 가 는 값 event.clientX+document.documentElement.scrollTop 상대 문서 의 수평 좌표+수직 방향 으로 굴 러 가 는 양 IE,FireFox 의 차 이 는 다음 과 같다.IE 6.0,FF 1.06+:clientWidth=width+padding clientHeight=height+padding offsetWidth=width+padding+border offsetHeight=height+padding+border IE 5.0/5.5:clientWidth=width-border clientHeight=height-border offsetWidth=width offsetHeight=height(CSS 의 margin 속성,clientWidth,offsetWidth,client Height,offset Height 는 모두 무관 합 니 다)－－－－－－－－－－－－－기술 요점 본 절 코드 는 주로 Document 대상 이 창 에 관 한 속성 을 사 용 했 는데 이런 속성의 주요 기능 과 용법 은 다음 과 같 습 니 다.창의 사 이 즈 를 얻 으 려 면 브 라 우 저 마다 다른 속성 과 방법 을 사용 해 야 합 니 다.창의 실제 사 이 즈 를 검사 하려 면 Netscape 에서 Window 속성 을 사용 해 야 합 니 다.IE 에서 Document 내부 에 깊이 들 어가 body 를 검 측 해 야 합 니 다.DOM 환경 에서 창의 사 이 즈 를 얻 으 려 면 요소 가 아 닌 루트 요소 의 사 이 즈 를 주의해 야 합 니 다.Window 대상 의 inner Width 속성 은 현재 창의 내부 폭 을 포함 합 니 다.Window 대상 의 inner Height 속성 은 현재 창의 내부 높이 를 포함 합 니 다.Document 대상 의 body 속성 은 HTML 문서 의 탭 에 대응 합 니 다.Document 대상 의 document Element 속성 은 HTML 문서 의 루트 노드 를 표시 합 니 다.document.body.clientHeight 는 HTML 문서 가 있 는 창의 현재 높이 를 표시 합 니 다.document.body.client Width 는 HTML 문서 가 있 는 창의 현재 폭 을 표시 합 니 다.실현 코드파일 이름:30.3.htm――――>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>        </title> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"> 
</head> 
<body> 
<h2 align="center">          </h2><hr> 
<form action="#" method="get" name="form1" id="form1"> 
<!C            C> 
            : <input type="text" name="availHeight" size="4"><br> 
            : <input type="text" name="availWidth" size="4"><br> 
</form> 
<script type="text/javascript"> 
<!C 
var winWidth = 0; 
var winHeight = 0; 
function findDimensions() //  ：     
{ 
//       
if (window.innerWidth) 
winWidth = window.innerWidth; 
else if ((document.body) && (document.body.clientWidth)) 
winWidth = document.body.clientWidth; 
//       
if (window.innerHeight) 
winHeight = window.innerHeight; 
else if ((document.body) && (document.body.clientHeight)) 
winHeight = document.body.clientHeight; 
//    Document   body    ，       
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) 
{ 
winHeight = document.documentElement.clientHeight; 
winWidth = document.documentElement.clientWidth; 
} 
//           
document.form1.availHeight.value= winHeight; 
document.form1.availWidth.value= winWidth; 
} 
findDimensions(); 
//    ，     
window.onresize=findDimensions; 
//C> 
</script> 
</body> 
</html>
소스 프로그램 해석(1)프로그램 은 먼저 폼 을 만 들 고 두 텍스트 상 자 를 포함 하여 창의 현재 너비 와 높이 를 표시 하 며 그 수 치 는 창 크기 에 따라 달라 집 니 다.(2)다음 자 바스 크 립 트 코드 에서 먼저 두 개의 변수 인 winWidth 와 winHeight 를 정의 하여 창의 높이 와 너비 값 을 저장 합 니 다.(3)그리고 함수 findDimensions()에서 window.inner Height 와 window.inner Width 를 사용 하여 창의 높이 와 너 비 를 얻 고 상기 두 변수 에 저장 합 니 다.(4)문서 내부 에 깊이 들 어가 body 를 검사 하여 창 크기 를 가 져 오고 상기 두 변수 에 저장 합 니 다.(5)함수 의 마지막 에 폼 요 소 를 이름 으로 접근 하여 두 텍스트 상자 로 출력 합 니 다.(6)JavaScript 코드 의 마지막 에 findDimensions()함 수 를 호출 하여 전체 작업 을 완성 합 니 다.
javascript 드 롭 다운 목록 상자 의 텍스트 값 예제 코드 가 져 오기
페이지 부분 JavaScript 방법의 구체 적 인 구현 을 사용 하지 않 습 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage