이 경우 사용되는 브라우저는 Chrome입니다.
1. 요소의 CSS 크기 얻기
1.1 요소의 인라인 스타일 얻기
<script>
function boxInfo(){
let box = document.getElementById('box');
let w = box.style.width;
let h = box.style.height;
console.log(w,h) // 700px 800px
}
</script>
<body>
<div id="box" style="width: 700px;height:800px; background-color: pink;"></div>
<button onclick="boxInfo()">测试</button>
</body>
스타일 속성에 값을 표시하기 만하면됩니다.
1.2 계산 된 스타일 얻기
<style>
#box{
width: 700px;
height: 800px;
padding: 10px;
background-color: pink;
border: 1px solid red;
}
</style>
<script>
function boxInfo(){
var style = window.getComputedStyle ? window.getComputedStyle(box,null) : null || box.currentStyle;
let w = style.width;
let h = style.height;
console.log(w,h) // 700px 800px
}
</script>
<body>
<div id="box" ></div>
<button onclick="boxInfo()">测试</button>
</body>
참고 : 요소의 너비와 높이를 설정하지 않으면 기본 너비와 높이가 IE가 아닌 브라우저에서 반환되고 자동 문자열이 IE에서 반환됩니다.
1.3 <link> 및 <style> 태그로 작성된 스타일 가져 오기
<style>
#box{
width: 700px;
height: 800px;
padding: 10px;
background-color: pink;
border: 1px solid red;
}
</style>
<script>
function boxInfo(){
var sheet = document.styleSheets[0];
var rule = (sheet.cssRules || sheet.rules)[0];
let w = rule.style.width;
let h = rule.style.height;
console.log(w,h) // 700px 800px
}
</script>
<body>
<div id="box" ></div>
<button onclick="boxInfo()">测试</button>
</body>
cssRules (또는 규칙)는 인라인 및 링크 스타일의 너비와 높이 만 가져올 수 있지만 인라인 및 계산 된 스타일은 가져올 수 없습니다.
getComputedStyle과 element.style의 유사점 및 차이점 :
같은 점 :
- 반환되는 모든 것은 CSSStyleDeclaration 객체입니다. 해당 속성이 취해지면 CSS camel case 쓰기 방법이 채택되고 float 속성에주의를 기울여야합니다.
차:
- element.style은 요소의 인라인 스타일, 즉 요소 의 스타일 속성에 작성된 스타일 만 읽고 getComputedStyle에서 읽은 스타일은 인라인 스타일, 포함 된 스타일 및 외부 스타일을 포함한 최종 스타일 입니다.
- element.style은 읽기와 쓰기를 모두 지원하지만 getComputedStyle은 읽기만 지원하고 쓰기는 지원하지 않습니다.
getComputedStyle을 사용하여 스타일을 읽고 element.style로 스타일을 수정할 수 있습니다.
요약 : 요소 크기를 얻기위한 위의 세 가지 CSS 방법은 요소의 CSS 크기 만 얻을 수 있지만 요소 자체의 실제 크기는 얻을 수 없습니다. 예를 들어, 패딩, 스크롤 막대, 테두리 등을 추가합니다.
2. 요소의 실제 크기 얻기
2.1 clientWidth 및 clientHeight
이 속성 그룹은 요소의 시각적 영역 크기와 요소 콘텐츠 및 내부 여백이 차지하는 공간의 크기를 가져올 수 있습니다.
요소 크기가 반환되지만 단위가 없습니다. 기본 단위는 px입니다. 100em과 같이 강제로 단위를 설정하면 여전히 px 크기를 반환합니다.
요소의 실제 크기에 대해 clientWidth 및 clientHeight는 다음과 같이 이해됩니다.
- 프레임을 늘리고 변경하지 마십시오.
- b. 변경하지 않고 바깥 쪽 여백을 늘리십시오.
- c. 내부 여백을 늘리면 최종 값이 원래 크기에 안쪽 여백의 크기를 더한 값이됩니다.
- d. 스크롤 막대를 늘리면 최종 값은 원래 크기에서 스크롤 막대 크기를 뺀 값과 같습니다.
<style>
#box{
background-color: green;
width: 200px;
height: 200px;
border: solid 5px red; /* 对应a理解，结果：200,200 */
margin: 10px; /* 对应b理解，结果：200,200*/
padding: 20px; /* 对应c理解，结果：240,240*/
overflow: scroll; /* 对应d理解，结果：223,223，223=200（css大小）+40（两边内边距）-17（滚动条宽度）*/
}
</style>
<script>
function boxInfo(){
var box = document.getElementById("box");
let w = box.clientWidth;
let h = box.clientHeight;
console.log(w,h) // 223 223
}
</script>
<body>
<div id="box" ></div>
<button onclick="boxInfo()">测试</button>
</body>
참고 : CSS 너비와 높이를 설정하지 않으면 IE가 아닌 브라우저는 스크롤 막대와 패딩의 계산 된 크기를 계산하고 IE 브라우저는 0을 반환합니다 (IE8이 수정 됨).
2.2 scrollWidth 、 scrollHeight
scrollWidth : 오버플로로 인해 웹 페이지에 표시 할 수없는 보이지 않는 부분을 포함하여 요소의 전체 너비를 반환합니다.
scrollHeight : 오버플로로 인해 웹 페이지에 표시 할 수없는 보이지 않는 부분을 포함하여 요소 의 전체 높이를 반환합니다.
요소의 실제 크기에 대해 scrollWidth 및 scrollHeight는 다음과 같이 이해됩니다.
- 테두리를 늘리면 브라우저마다 해석이 다릅니다 (다음은 IE8에서 정상적으로 작동하고 IE6는 제대로 작동하지 않음) :
a. Firefox 및 Opera 브라우저는 테두리 크기를 늘
립니다 . b. IE, Chrome 및 Safari 브라우저는 크기를 무시합니다. 테두리]
. C IE 브라우저 만의 독창적 인 콘텐츠의 높이를 표시; - 안쪽 여백을 늘리면 최종 값은 원래 크기에 안쪽 여백 크기를 더한 값이됩니다.
- 스크롤 막대를 늘리면 최종 값은 원래 크기에서 스크롤 막대의 크기를 뺀 값이됩니다.
- 외부 여백을 늘리고 변경 사항은 없습니다.
- 콘텐츠 오버플로를 늘리면 Firefox, Chrome 및 IE가 실제 콘텐츠 높이를 얻고 Opera는 처음 세 브라우저에서 얻은 높이보다 작고 Safari는 처음 세 브라우저에서 얻은 높이보다 큽니다.
<style>
#wrap{
width: 200px;
height: 200px;
background-color: blue;
padding: 20px;
overflow: auto;
border: 1px solid green;
}
#box{
width: 400px;
height: 400px;
padding: 10px;
background-color: pink;
border: 1px solid red;
margin: 20px;
}
</style>
<script>
function boxInfo(){
let box = document.getElementById("box");
console.log(box.scrollWidth,box.scrollHeight) // 420 420
}
</script>
<body>
<div id="wrap">
<div id="box"></div>
</div>
<button onclick="boxInfo()">测试</button>
</body>
2.3 offsetWidth 、 offsetHeight
이 속성 집합은 테두리, 패딩 및 스크롤 막대를 포함하여 요소의 실제 크기를 반환 할 수 있습니다. 요소 크기가 반환됩니다. 기본 단위는 px입니다. CSS 너비와 높이가 설정되지 않은 경우 계산 된 너비와 높이를 가져옵니다.
요소의 실제 크기에 대해 offsetWidth 및 offsetHeight는 다음과 같이 이해됩니다.
- 테두리를 늘리면 최종 값은 원래 크기에 테두리 크기를 더한 값이됩니다.
- 안쪽 여백을 늘리면 최종 값은 원래 크기에 안쪽 여백 크기를 더한 값이됩니다.
- 외부 여백을 늘리고 변경 사항은 없습니다.
- 스크롤 막대를 늘리면 변경 사항이 없으며 감소하지 않습니다.
요소의 크기를 얻으려면 일반적으로 블록 수준 (블록) 요소이며 CSS 크기가 설정된 요소를 사용하는 것이 더 편리합니다.
인라인 요소이거나 크기가 설정되지 않은 요소 일 경우 특히 번거롭기 때문에 사용시주의하는 것이 좋습니다.
<style>
#box{
background-color: green;
width: 200px;
height: 200px;
border: solid 5px red; /*结果：210,210*/
margin: 10px; /*结果：210,210（无变化）*/
padding: 20px; /*结果：250,250*/
overflow: scroll; /*结果：250,250（无变化）*/
}
</style>
<script>
function boxInfo(){
var box = document.getElementById("box");
let w = box.offsetWidth;
let h = box.offsetHeight;
console.log(w,h) // 250 250
}
</script>
<body>
<div id="box" ></div>
<button onclick="boxInfo()">测试</button>
</body>
3. 요소의 주변 크기 (위치)를 가져옵니다.
3.1 clientLeft 、 clientTop
요소에서 설정 한 왼쪽 및 위쪽 테두리의 크기를 가져옵니다 (설정되지 않은 경우 0 반환). 현재는 왼쪽 및 위쪽 그룹 만 제공되고 오른쪽 및 아래쪽은 제공되지 않습니다.
네 변의 너비가 다른 경우 계산 된 스타일에서 직접 얻거나 위의 세 그룹에서 요소의 크기를 빼서 얻을 수 있습니다.
右边框的宽度：div.offsetWidth - div.clientWidth - div.clientLeft
底边框的宽度：div.offsetHeight - div.clientHeight - div.clientTop
<style>
#box{
width: 200px;
height: 200px;
border-top: solid 10px red;
border-right: solid 20px #00ff00;
border-bottom: solid 30px blue;
border-left: solid 40px #808080;
}
</style>
<script>
function boxInfo(){
var box = document.getElementById("box");
console.log(box.clientLeft,box.clientTop) // 40 10
}
</script>
<body>
<div id="box" ></div>
<button onclick="boxInfo()">测试</button>
</body>
3.2 offsetLeft 、 offsetTop
이 속성 세트는 상위 요소에 상대적인 현재 요소의 위치를 가져올 수 있습니다. 위치 : 절대 위치로 설정하는 것이 가장 좋습니다. 그렇지 않으면 브라우저마다 해석이 다릅니다.
<style>
#box{
width: 200px;
height: 200px;
background-color: pink;
position: absolute; /* 将 position 设置为 absolute，则所有浏览器返回一样的值 */
left: 30px;
top: 20px;
padding: 10px; /* 30 20 加上内边距，不会影响它的位置 */
border: 1px solid red; /* 30 20 加上边框，不会影响它的位置 */
margin: 50px; /* 80 70 加上外边距，位置值会累加 */
}
</style>
<script>
function boxInfo(){
var box = document.getElementById("box");
console.log(box.offsetLeft, box.offsetTop) // 80 70
}
</script>
<body>
<div id="box" ></div>
<button onclick="boxInfo()">测试</button>
</body>
3.3 scrollTop 、 scrollLeft
scrollLeft : 읽기-쓰기 요소의 왼쪽에서 스크롤 된 거리, 즉 요소의 왼쪽 가장자리와 요소에서 현재 보이는 콘텐츠의 가장 왼쪽 끝 사이의 거리;
scrollTop : 상단의 스크롤 된 거리 읽기-쓰기 요소, 즉 요소의 위쪽 가장자리와 요소 사이의 거리 현재 보이는 콘텐츠의 위쪽 사이의 거리.
- 이 두 속성은 요소에 오버플로가 설정된 CSS 스타일에서만 사용할 수 있습니다. 그렇지 않으면이 두 속성은 의미가 없으며 오버플로 값은 visiblehidden, auto, scroll입니다.
- 이 두 매개 변수의 값을 설정할 때 숫자를 직접 사용하십시오. 그렇지 않으면 작동하지 않습니다.
<style>
#wrap{
width: 300px;
height: 300px;
background-color: blue;
padding: 20px;
overflow: auto;
border: 1px solid green;
}
#box{
width: 400px;
height: 400px;
background-color: pink;
padding: 10px;
border: 1px solid red;
margin: 50px;
}
</style>
<script>
function boxInfo(){
var wrap = document.getElementById("wrap");
wrap.scrollLeft = 100; // 设置盒子左边滚出区域宽度为100像素
wrap.scrollTop = 100; // 设置盒子顶部滚出区域高度为100像素
console.log(wrap.scrollLeft, wrap.scrollTop) // 100 100
}
</script>
<body>
<div id="wrap">
<div id="box" ></div>
</div>
<button onclick="boxInfo()">测试</button>
</body>
3.4 offsetParent
부모 요소를 가져
옵니다. 부모 요소 자체가 <body>이면 비 IE는 본문 개체를 반환하고 IE (IE6)는 html 개체를 반환합니다.
두 요소가 중첩 된 경우 부모 요소가 위치 지정 위치를 사용하지 않는 경우 : 절대 , offsetParent는 body 객체 또는 html 객체를 반환합니다.
따라서 offsetLeft 및 offsetTop을 가져올 때 CSS 위치 지정이 매우 중요합니다.
많은 수준에서 외부 레이어가 배치되었습니다. 내부 요소와 본문 또는 html 요소 사이의 거리를 어떻게 얻습니까?
즉, 페이지에서 요소의 위치를 가져옵니다. 그런 다음 지속적으로 역 추적하고 누적하여 실현할 수있는 함수를 작성할 수 있습니다.
<style>
#wrap{
width: 300px;
height: 300px;
background-color: blue;
padding: 20px;
border: 1px solid green;
position: absolute;
top:50px;
left: 10px;
}
#box{
width: 100px;
height: 100px;
background-color: pink;
border: 1px solid red;
}
</style>
<script>
function boxInfo(){
var box = document.getElementById("box");
var left = box.offsetLeft; // 得到第一层距离
var parent = box.offsetParent; // 得到第一个父元素
while (parent !== null) {
// 如果还有上一层父元素
left += parent.offsetLeft; // 把本层的距离累加
parent = parent.offsetParent; // 得到本层的父元素
}
console.log(left) // 30
return left;
}
</script>
<body>
<div id="wrap">
<div id="box"></div>
</div>
<button onclick="boxInfo()">测试</button>
</body>
3.5 getBoundingClientRect ()
는 네 가지 속성 (left, top, right, bottom)을 포함하는 직사각형 객체를 반환합니다. 각각 요소의 각면과 페이지의 상단 및 왼쪽 사이의 거리를 나타냅니다.
참고 : IE, Firefox3 +, Opera9.5, Chrome, Safari 지원. IE에서 기본 좌표는 (2,2)에서 계산되므로 최종 거리가 다른 브라우저보다 2 픽셀 더 길어집니다. 호환되어야합니다.
<style>
*{
margin:0px;
}
#box{
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
background-color: pink;
border: 1px solid red;
}
</style>
<script>
function boxInfo(){
let box = document.getElementById("box");
let top = box.getBoundingClientRect().top; // 元素上边距离页面上边的距离
let bottom = box.getBoundingClientRect().bottom; // 元素下边距离页面上边的距离
let left = box.getBoundingClientRect().left; // 元素左边距离页面左边的距离
let right = box.getBoundingClientRect().right; // 元素右边距离页面左边的距离
console.log(top,bottom,left,right) // 10 132 10 132
}
</script>
<body>
<div id="box"></div>
<button onclick="boxInfo()">测试</button>
</body>