JavaScript DOM 요소 크기 및 위치_기본 지식
1 요소의 CSS 크기를 가져옵니다
1. 스타일 인라인을 통해 요소의 크기를 가져옵니다
var box = document.getElementById('box'); // 요소 가져오기;
box.style.width; 상자.스타일.높이;
2. 계산을 통해 요소의 크기를 구합니다
// 크기가 자체적으로 설정되면 요소의 크기가 반환됩니다. 자체적으로 설정되지 않으면 IE가 아닌 경우 기본 크기가 반환되고 IE는 자동을 반환합니다.
3. CSSStyleSheet 개체의 cssRules(또는 규칙) 속성을 통해 요소의 크기를 가져옵니다.
코드 복사
코드는 다음과 같습니다.
추신: cssRules는 인라인 및 링크 스타일의 너비와 높이만 얻을 수 있지만 인라인 및 계산된 스타일은 얻을 수 없습니다.
요약: 요소 크기를 얻는 위의 세 가지 CSS 방법은 요소의 CSS 크기만 얻을 수 있지만 패딩/스크롤 막대/테두리 추가와 같은 요소 자체의 실제 크기는 얻을 수 없습니다.
2 요소의 실제 크기를 가져옵니다
1.clientWidth 및 clientHeight
이 속성 세트는 요소의 콘텐츠와 패딩이 차지하는 공간을 포함하여 요소의 시각적 영역 크기를 얻을 수 있습니다.
box.clientWidth; // 200;
추신: 요소 크기가 반환되지만 기본 단위는 px입니다.
추신: 요소의 실제 크기와 관련하여 clientWidth 및 clientHeight는 다음과 같이 이해됩니다.
1. 요소에 테두리 추가, 변경 없음, 200;
2. 요소에 외부 테두리 추가, 변경 없음, 200;
3. 스크롤 막대를 추가합니다. 최종 값 = 원본 크기 - 스크롤 막대 크기
4. 패딩 증가, 최종 값 = 원래 크기 패딩 크기
추신: CSS 너비와 높이가 설정되지 않은 경우 IE가 아닌 경우 계산된 스크롤 막대 및 패딩 크기가 포함되며 IE는 0을 반환합니다.
이 속성 세트는 스크롤 막대 없이 요소 콘텐츠의 전체 높이를 얻을 수 있습니다.
box.scrollWidth;
// PS: 요소 크기를 반환합니다. 기본 단위는 px입니다. CSS 너비와 높이가 설정되지 않은 경우 계산된 너비와 높이를 가져옵니다.
이 속성 세트는 테두리/패딩 및 스크롤 막대를 포함하여 요소의 실제 크기를 반환할 수 있습니다.
상자.오프셋폭 200
추신: 요소 크기가 반환되고 기본 단위는 px입니다. CSS 너비와 높이가 설정되지 않은 경우 계산된 너비와 높이를 가져옵니다.
추신: 요소의 실제 크기에 대한 이해는 다음과 같습니다.
1. 테두리 추가, 최종 값 = 원본 크기 테두리 크기
2. 패딩 증가, 최종 값 = 원래 크기 패딩 크기
3. 외부 국경 거점 추가, 변경 없음;
4. 스크롤바를 늘리면 변화도 없고 감소도 없습니다.
추신: 요소 크기를 얻으려면 일반적으로 CSS 크기가 설정된 블록 수준 요소를 사용하는 것이 더 편리합니다.
1.clientLeft 및 clientTop
// 이 속성 세트는 요소에 의해 설정된 왼쪽 테두리와 위쪽 테두리의 크기를 가져올 수 있습니다.
box.clientLeft;
2.offsetLeft 및 offsetTop(오프셋)
// 这组属性可以获取当前元素边框相对于父元素边框的位置;
box.offsetLeft; // 50;
// PS:获取元素当前相对于父元素的位置,最好将它设置为定位position:absolute;
// PS:加上边框和内边距不会影响它的位置,但加上外边据会累加;
box.offsetParent; // 得到父元素;
// PS:offsetParent中,如果本身父元素是<body>,非IE返回body对象,IE返回html对象;
// 如果两个元素嵌套,如果上级父元素没有使用定位position:absolute,那么offsetParent将返回body或html对象;
// 如果说在很多层次里,外层已经定位,获取任意一个元素距离页面上的位置,可以不停的向上回溯获取累加来实现;
box.offsetTop+box.offsetParent.offsetTop; // 只有两层的情况下;
// 如果多层的话,就必须使用循环或递归;
function offsetLeft(element){
var left = element.offsetLeft; // 得到第一层距离;
var parent = element.offsetParent; // 得到第一个父元素;
while(parent !== null){ // 判断如果还有上一层父元素;
left += parent.offsetLeft; // 将得到的距离累加;
parent = parent.offsetParent; // 将父元素也回溯;
} // 然后循环;
return left; // 得到最终距离;
}
// 这组属性可以获取被滚动条隐藏的区域大小,也可设置定位到该区域;
box.scrollTop; // 获取滚动内容上方的位置;
// 设置滚动条滚动到最初始的位置;
function scrollStart(element){
if(element.scrollTop != 0){
element.scrollTop = 0;
}
}
// 这个方法返回一个矩形对象,包含四个属性:left/top/right和bottom;
// 分别表示元素各边与页面上边和左边的距离;
var box = document.getElementById('box');
alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离;
alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离;
alert(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离;
alert(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离;
// PS:IE/Firefox/Opera/Chrome/Safari都支持;
// 但在IE中,默认坐标从(2,2)开始计算,导致最终距离比其他浏览器多出两个像素;
document.documentElement.clientTop; // 非IE为0,IE为2;
document.documentElement.clientLeft; // 非IE为0,IE为2;
// 兼容getBoundingClientRect()
function getRect(element){
var rect = element.getBoundingClientRect();
var top = document.documentElement.clientTop;
var left = document.documentElement.clientLeft;
return {
top:rect.top-top, // 元素上边距-页面的上边距(0-0或2-2);
bottom:rect.bottom-top,
left:rect.left-left, // 元素左边距-页面的左边距(0-0或2-2);
right:rect.right-left
}
};1. 오프셋 크기: 화면에서 요소가 차지하는 모든 표시 공간을 포함합니다. 요소의 표시 크기는 패딩/스크롤바 및 테두리를 포함한 높이와 너비에 따라 결정됩니다. 2. 클라이언트 차원: 요소 콘텐츠와 해당 패딩이 차지하는 공간을 나타냅니다. 3.스크롤 크기(스크롤 크기): 스크롤되는 내용을 포함하는 요소의 크기
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7364
15
1628
14
1353
52
1266
25
1214
29
Windows 11에서 환경 변수 설정을 활성화하는 방법에 대한 세부 정보
Dec 30, 2023 pm 06:07 PM
환경 변수 기능은 시스템에서 구성 프로그램을 실행하는 데 필수적인 도구이지만 최신 win11 시스템에서는 여전히 이를 설정하고 여는 방법을 모르는 사용자가 많습니다. win11 환경 변수 열기 위치를 알아보십시오. win11 환경 변수는 어디에 있습니까? 1. 먼저 "win+R"을 입력하여 실행 상자를 엽니다. 2. 그런 다음 controlsystem 명령을 입력합니다. 3. 열리는 시스템 정보 인터페이스의 왼쪽 메뉴에서 "고급 시스템 설정"을 선택합니다. 4. 그런 다음 열리는 "시스템 속성" 창 하단에서 "환경 변수" 옵션을 선택합니다. 5. 마지막으로 열린 환경 변수에서 필요에 따라 관련 설정을 지정할 수 있습니다.
Win11 시작 경로 및 여는 방법
Jan 03, 2024 pm 11:13 PM
모든 Windows 시스템에는 시작 경로가 있습니다. 파일이나 소프트웨어를 추가하면 부팅 시 열립니다. 하지만 많은 친구들은 win11 시작 경로가 어디에 있는지 모릅니다. 실제로 C 드라이브의 해당 폴더에 들어가기만 하면 됩니다. Win11 시작 경로: 1. "내 PC"를 두 번 클릭하여 엽니다. 2. "C:\ProgramData\Microsoft\Windows\StartMenu\Programs\Startup" 경로를 경로 상자에 직접 붙여넣습니다. 3. win11 시작 경로는 다음과 같습니다. 부팅 후 파일을 열려면 파일을 넣으면 됩니다. 4. 해당 경로로 진입이 불가능할 경우 숨겨져 있을 수 있습니다.
windows10 자격 증명 관리자는 어디에 있습니까?
Jul 09, 2023 am 10:09 AM
Credential Manager는 사용자가 웹 자격증명과 Windows 자격증명을 관리하기 위해 사용하는 기능이지만, 아직까지 Windows 10 Credential Manager가 어디에 있는지 모르는 사용자가 많습니다. 실제로 자격 증명 관리자는 제어판을 연 후 보기를 클릭하여 모든 종류의 정보를 볼 수 있도록 보기 방법을 작은 아이콘으로 변경해야 합니다. 대량의 을(를) 보려면 계정 비밀번호를 입력해야 합니다. Windows 10 자격 증명 관리자는 어디에 있습니까? 1. 시스템에서 제어판을 열고 오른쪽 상단에 있는 보기 방법을 클릭한 다음 유형을 작은 아이콘으로 변환합니다. 2. 작은 아이콘으로 확인 후, "인증서 관리자"를 클릭하세요. 3. 자격증명 관리자에 진입하시면 주로 사용되는 관련 기능에 대한 소개를 보실 수 있습니다.
pip 설치 패키지 저장소의 위치와 구조 이해
Jan 18, 2024 am 08:23 AM
pip가 설치한 패키지의 저장 위치에 대해 자세히 알아보려면 특정 코드 예제가 필요합니다. Pip는 Python 언어에서 일반적으로 사용되는 패키지 관리 도구로, Python 패키지를 쉽게 설치, 업그레이드 및 관리하는 데 사용됩니다. pip를 사용하여 패키지를 설치하면 PyPI(Python Package Index)에서 해당 패키지 파일을 자동으로 다운로드하여 지정된 위치에 설치합니다. 그렇다면 pip로 설치한 패키지는 어디에 저장되어 있나요? 이는 많은 Python 개발자가 직면하게 되는 문제입니다. 이 기사에서는 pip가 설치한 패키지의 위치를 자세히 살펴보고 다음을 제공합니다.
Kuaishou는 어디에 게시되며 위치를 변경하는 방법은 무엇입니까? 업로드된 동영상에 위치를 추가하는 방법은 무엇입니까?
Mar 21, 2024 pm 06:00 PM
중국에서 잘 알려진 단편 비디오 플랫폼인 Kuaishou는 많은 창작자들에게 자신의 재능을 선보이고 그들의 삶을 공유할 수 있는 기회를 제공합니다. 영상을 업로드할 때 영상 게시 위치를 어떻게 변경해야 하는지 헷갈려 하시는 초보 크리에이터분들이 있을 수 있습니다. 이 기사에서는 Kuaishou 비디오 게시 위치를 변경하는 방법을 소개하고 Kuaishou 비디오 게시에 대한 몇 가지 팁을 공유하여 이 플랫폼을 더 잘 활용하여 작품을 선보일 수 있도록 도와드립니다. 1. Kuaishou는 어디에 게시되며 위치를 변경하는 방법은 무엇입니까? 1. 게시 인터페이스: Kuaishou 앱에서 "게시" 버튼을 클릭하여 비디오 게시 인터페이스로 들어갑니다. 2. 위치 정보: 게시 인터페이스에는 '위치' 열이 있습니다. 클릭하면 위치 선택 인터페이스로 들어갑니다. 3. 위치 변경: 위치 선택 인터페이스에서 '위치' 버튼을 클릭하면 현재 위치를 볼 수 있습니다. 위치를 변경하려면 "위치"를 클릭하세요.
Stardome Railway Crocker Film and Television Park의 종이접기 새 위치
Mar 27, 2024 pm 11:51 PM
스타 돔 철도의 크로커 영화 및 텔레비전 공원에는 총 20마리의 종이접기 새가 있습니다. 많은 플레이어가 크로커 영화 및 텔레비전 공원의 종이 접기 새가 어디에 있는지 알지 못합니다. 편집자는 모든 사람을 돕기 위해 각 종이 접기 새의 위치를 요약했습니다. . 특정 콘텐츠를 검색하고 Croaker Film and Television Park의 종이접기 새 위치에 대한 최신 요약을 살펴보세요. 홍키돔 레일웨이 안내 스타돔 레일웨이 크로커무비파크 종이접기새 위치 1, 크로커무비파크 1층 2, 크로커무비파크 2층
Gaode Map Home의 위치를 변경하는 방법
Feb 27, 2024 pm 07:31 PM
일상적인 여행의 강력한 조수인 Amap은 정확한 내비게이션 서비스를 제공할 뿐만 아니라 사용자가 친숙한 방식으로 "집 위치"를 직접 확인할 수 있도록 해줍니다. 집으로 가는 길을 매번 확인할 수 있어 편리합니다. 하지만 때로는 우리 집의 위치도 업데이트해야 하는데, Gaode 지도에서 "집 위치"를 쉽게 수정할 수 있는 방법은 무엇일까요? 다음으로, Gaode 지도에서 위치를 수정하는 방법을 함께 알아보세요! 답변: [Amap] - [설정] - [점 3개 아이콘] - [위치 수정] - [위치 설정] - [집 주소로 설정]. 구체적인 단계: 1. 먼저 Amap 소프트웨어를 열고 홈페이지에 들어가서 위로 슬라이드한 후 홈을 찾아 [설정]을 클릭합니다. 2. 그런 다음 설정 페이지에서 다음을 수행할 수 있습니다.
라스트 시대 아레나는 어디에 있나요?
Mar 07, 2024 pm 08:16 PM
'라스트 에이지'에서는 플레이어가 게임 모드, 챌린지 모드, 아레나 등 다양한 모드에서 플레이할 수 있습니다. Arena는 게임의 궁극적인 게임플레이로, 플레이어가 선택할 수 있는 두 가지 모드를 제공합니다. 마지막 시대의 투기장은 어디에 있습니까? 답변: 투기장은 최종 게임이며 구체적인 위치는 챔피언의 문입니다. 아레나 키 또는 메모리 아레나 키를 획득해야 합니다. 마우스 오른쪽 버튼을 클릭하면 월드맵이 표시되며 챔피언스 게이트의 특정 위치를 찾을 수 있습니다. 아레나는 아레나 챔피언십 모드와 엔드리스 아레나 모드의 두 가지 주요 모드로 나뉩니다. 전자에는 40개의 적군과 엄선된 보상이 포함되어 있으며, 항상 아레나 챔피언과의 전투로 마무리됩니다. 아레나 챔피언십 모드에는 4개의 스테이지가 있습니다. 난이도가 높을수록 보상도 좋아집니다. 엔드리스 아레나(Endless Arena)는 무한 웨이브 모드로, 최고 점수를 획득한 도전자가 점차 난이도를 높여갑니다.
