페이지 요소 값을 얻기 위한 Js와 Jq의 방법 및 차이점 비교_jquery

JS와 Jquery는 모두 페이지 요소의 너비, 높이 및 상대 변위를 얻을 수 있습니다. 작성 방법의 차이점은 무엇입니까? 이번 글에서는 이에 대해 자세히 소개하겠습니다.

1.Js는 브라우저 높이와 너비를 가져옵니다

document.documentElement.clientWidth ==> 브라우저 표시 영역 너비
document.documentElement.clientHeight ==> 브라우저 표시 영역 높이
document.body.clientWidth ==> BODY 개체 너비
document.body.clientHeight ==> BODY 개체 높이

Jq는 브라우저 높이와 너비를 가져옵니다

$(window).width() ==> 브라우저 표시 영역 너비
$(window).height() ==> 브라우저 가시 영역 높이
$(document).height() ==> 페이지 문서 높이
$(document.body).height() ==> BODY 개체 높이

2.Js는 객체의 높이와 너비를 가져옵니다

obj.width = obj.style.width
obj.clientWidth = width padding ==> 내부 테두리를 포함한 요소의 너비 가져오기(패딩)
obj.offsetHeight = height padding border ==> 내부 테두리(padding) 및 테두리(border)를 포함한 요소의 높이를 가져옵니다.

Jq는 객체의 높이와 너비를 가져옵니다

obj.innerWidth() ==> 내부 테두리(패딩)를 포함한 요소의 너비를 가져옵니다.
obj.outerWidth() ==> 내부 경계(패딩) 및 테두리(border)를 포함한 요소 너비를 가져옵니다.
obj.outerWidth(true) ==> 외부 테두리(여백)를 포함한 요소의 너비를 가져옵니다.
동일한 요소 w는 다음과 같아야 합니다: width()<=innerWidth()<=outerWidth()<=outerWidth(true);

3.Js 객체의 상대적인 높이와 너비를 가져옵니다

obj.offsetLeft ==> 상위 요소를 기준으로 한 요소의 왼쪽
obj.offsettop ==> 상위 요소를 기준으로 한 요소의 상단
obj.scrollWidth ==> 객체의 스크롤 너비를 가져옵니다
obj.scrollHeight ==> 개체의 스크롤 높이 가져오기
obj.scrollLeft ==> 개체의 왼쪽 끝에서 스크롤 거리를 설정하거나 가져옵니다
obj.scrollTop ==> 개체 상단의 스크롤 거리를 설정하거나 가져옵니다

Jq는 객체의 상대적 높이와 너비를 가져옵니다

obj.offset().left ==> 요소는 문서의 왼쪽을 기준으로 합니다
obj.offset().top ==> 요소는 문서의 상단
을 기준으로 합니다. obj.scrollLeft() ==> 스크롤 막대의 왼쪽을 기준으로 객체의 오프셋을 설정하거나 반환합니다.
obj.scrollTop() ==> 스크롤 막대 상단을 기준으로 객체의 오프셋을 설정하거나 반환합니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.