javascript_javascript 스킬의 오프셋, 클라이언트, 스크롤 속성 요약
- WBOY원래의
- 2016-05-16 15:45:261229검색
HTML 요소에는 오프셋, 클라이언트, 스크롤로 시작하는 여러 속성이 있는데, 이는 항상 혼란스럽습니다. 책에서 본 내용을 적어서 필요한 친구들과 공유해보세요. 주로 다음 속성:
첫 번째 그룹: offsetWidth, offsetHeight, offsetLeft, offsetTop, offsetParent
두 번째 그룹: clientWidth, clientHeight, clientLeft, clientTop
세 번째 그룹: scrollWidth, scrollHeight, scrollLeft, scrollTop
자세한 정의는 다음과 같습니다.
1.1 HTML 요소의 offsetWidth 및 offsetHeight는 요소의 테두리와 패딩을 포함하여 화면 크기를 CSS 픽셀로 반환하지만 외부 여백은 반환하지 않습니다.
1.2 offsetLeft 및 offsetTop 속성은 요소의 X 및 Y 좌표를 반환합니다. 일반적으로 반환 값은 문서 좌표입니다. 그러나 위치가 지정된 요소 및 기타 일부 요소(예: 표 셀)의 하위 항목에 대해 이러한 속성이 반환하는 좌표는 문서가 아닌 상위 요소를 기준으로 합니다.
1.3 offsetParent 속성은 offsetLeft 및 offsetTop을 기준으로 상위 요소를 지정합니다. offsetParent가 null인 경우 후자 두 개의 반환 값은 문서 좌표입니다. 따라서 일반적으로 offsetLeft 및 offsetTop을 사용하여 요소 e의 위치를 계산하려면 루프가 필요합니다.
//计算元素的文档坐标
function getElementPosition(e){
var x=0,y=0;
while(e !=null){
x +=e.offsetLeft;
y +=e.offsetTop;
e=e.offsetParent;
}
return {x:x, y:y} ;
}
이 방법으로 계산된 위치가 항상 정확하지는 않습니다. 내장된 getBoundingClientRect() 방법을 사용하는 것이 좋습니다.
2.1 clientWidth 및 clientHeight는 테두리 크기를 포함하지 않고 콘텐츠와 패딩만 포함한다는 점을 제외하면 offsetWidth 및 offsetHeight 속성과 유사합니다. 동시에, 브라우저가 패딩과 테두리 사이에 스크롤 막대를 추가하면 clientWidth 및 clientHeight의 반환 값에는 스크롤 막대가 포함되지 않습니다. clientWidth 및 clientHeight는 5a8028ccc7a7e27417bff9f05adf5932, ffbe95d20f3893062224282accb13e8f 및 45a2772a6b6107b401db3c9b82c049c2 유형의 인라인 요소에 대해 항상 0을 반환합니다.
2.2 clientLeft 및 clientTop은 요소 패딩의 외부 가장자리와 테두리의 외부 가장자리 사이의 수평 및 수직 거리를 반환합니다. 일반적으로 이러한 값은 왼쪽 및 위쪽 테두리의 너비와 같습니다. 그러나 요소에 스크롤 막대가 있고 브라우저가 해당 스크롤 막대를 왼쪽이나 위쪽으로 회전하는 경우 스크롤 막대의 너비도 포함됩니다. 인라인 요소의 경우 항상 0입니다. 일반적으로 clientLeft와 clientTop은 거의 사용되지 않습니다.
3.1 scrollWidth 및 scollHeight는 요소의 콘텐츠 영역과 패딩, 오버플로된 콘텐츠의 크기입니다. 콘텐츠가 오버플로 없이 콘텐츠 영역과 정확히 일치하는 경우 이러한 속성은 clientWidth 및 clientHeight와 동일합니다. 그러나 오버플로되면 오버플로 콘텐츠가 포함되고 반환 값은 clientWidth 및 clientHeight보다 큽니다.
3.2 scrollLeft 및 scrollTop은 요소의 스크롤 막대 위치를 지정합니다. scrollLeft 및 scrollTop은 쓰기 가능하며 요소의 내용을 스크롤하도록 설정할 수 있습니다(HTML 요소에는 Window 객체와 유사한 scrollTo() 메서드가 없음).
obj.offset[WidthHeightTopLeft] 상위 컨트롤을 기준으로 컨트롤의 위치를 가져옵니다
event.offset[XY]는 이벤트를 트리거한 컨트롤에서 마우스 단계의 좌표를 가져옵니다.
event.screen[XY] 화면 좌표를 기준으로 한 마우스
event.client[XY] 웹페이지를 기준으로 한 마우스 좌표는
에 있습니다.
obj.scroll[WidthHeightTopLeft] 개체 스크롤 크기를 가져옵니다
obj.client[WidthHeightTopLeft] 객체가 보이는 영역의 크기를 가져옵니다
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
div{
font-family: "宋体";
font-size: 12px;
color: #000000;
}
#div1{
position:absolute;
background-color:#f0f0f0;
width:200px;
height:200px;
left:20px;
top:0px;
z-index:1;
}
#div2{
background-color:#cfc0cf;
width:200px;
height:210px;
position:absolute;
left:261px;
top:347px;
z-index:100;
}
#div3{
background-color:#abbfbf;
width:200px;
height:200px;
position:absolute;
left:20px;
top:247px;
z-index:100;
}
#div4{
background-color:#cfcfcf;
width:200px;
height:200px;
position:absolute;
left:461px;
top:147px;
z-index:100;
}
-->
</style>
</head>
<body>
<div id='div1' >offset 控件相对于父窗体的位置</div>
<script>
function offset(ids){
ids.innerHTML="offsetLeft ="+ids.offsetLeft+"<BR>";
ids.innerHTML+="offsetWidth ="+ids.offsetWidth+"<BR>";
ids.innerHTML+="offsetHeight ="+ids.offsetHeight+"<BR>";
ids.innerHTML+="offsetTop ="+ids.offsetTop+"<BR>";
ids.innerHTML+="event.offset 鼠标相对于控件的位置<BR>";
ids.innerHTML+="offsetX ="+event.offsetX+"<BR>";
ids.innerHTML+="offsetY ="+event.offsetY+"<BR>";
}
function screen(ids){
ids.innerHTML="scrollWidth ="+ids.scrollWidth+"<BR>";
ids.innerHTML+="scrollHeight ="+ids.scrollHeight+"<BR>";
ids.innerHTML+="scrollTop ="+ids.scrollTop+"<BR>";
ids.innerHTML+="scrollLeft ="+ids.scrollLeft+"<BR>";
}
function client(ids){
ids.innerHTML="clientWidth ="+ids.clientWidth+"<BR>";
ids.innerHTML+="clientHeight ="+ids.clientHeight+"<BR>";
ids.innerHTML+="clientTop ="+ids.clientTop+"<BR>";
ids.innerHTML+="clientLeft ="+ids.clientLeft+"<BR>";
}
function eventc(ids){
ids.innerHTML="鼠标相对于屏幕坐标<BR>event.screenX="+event.screenX+"<BR>";
ids.innerHTML+="event.screenY ="+event.screenY+"<BR>";
ids.innerHTML+="鼠标相对于网页坐标event.clientX="+event.clientX+"<BR>";
ids.innerHTML+="event.clientY ="+event.clientY+"<BR>";
}
</script>
</body>
</html>
각 브라우저에는 이러한 속성이 있으며 일부 값은 다를 수 있습니다.
코드를 직접 작성하고 결과를 비교하면 이해가 될 것입니다.