집 > 기사 > 웹 프론트엔드 > javascript_javascript 스킬 중 offsetleft 속성 사용법에 대한 자세한 설명

javascript_javascript 스킬 중 offsetleft 속성 사용법에 대한 자세한 설명

WBOY원래의: 2016-05-16 15:32:441760검색

이 속성은 현재 요소와 상위 요소의 왼쪽 가장자리 사이의 거리를 반환할 수 있습니다. 물론 이 상위 요소도 특별합니다.

(1) 상위 요소에 위치가 지정된 요소가 있는 경우 현재 요소에 가장 가까운 위치가 지정된 요소의 가장자리까지의 거리가 반환됩니다.
(2) 상위 요소에 위치 지정 요소가 없으면 몸체의 왼쪽 가장자리를 기준으로 한 거리가 반환됩니다.

문법 구조:

obj.offsetleft

특별 참고 사항: 이 속성은 읽기 전용이므로 값을 할당할 수 없습니다.

코드 예:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
*{
 margin: 0px;
 padding: 0px;
}
#main{
 width:300px;
 height:300px;
 background:red;
 position:absolute;
 left:100px;
 top:100px;
}
#box{
 width:200px;
 height:200px;
 background:blue;
 margin:50px; 
 overflow:hidden;
}
#inner{
 width:50px;
 height:50px;
 background:green;
 text-align:center;
 line-height:50px;
 margin:50px;
}
</style>
<script type="text/javascript">
window.onload=function(){
 var inner=document.getElementById("inner");
 inner.innerHTML=inner.offsetLeft;
}
</script>
</head>
<body>
<div id="main">
 <div id="box">
 <div id="inner"></div>
 </div>
</div>
</body>
</html>

위 코드는 메인 요소가 첫 번째 위치에 있는 상위 요소이기 때문에 내부 요소와 메인 요소의 왼쪽 사이의 거리를 반환할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
*{
 margin: 0px;
 padding: 0px;
}
#main{
 width:300px;
 height:300px;
 background:red;
 margin:100px;
}
#box{
 width:200px;
 height:200px;
 background:blue;
 overflow:hidden;
}
#inner{
 width:50px;
 height:50px;
 background:green;
 text-align:center;
 line-height:50px;
 margin:50px;
}
</style>
<script type="text/javascript">
window.onload=function(){
 var inner=document.getElementById("inner");
 inner.innerHTML=inner.offsetLeft;
}
</script>
</head>
<body>
<div id="main">
 <div id="box">
 <div id="inner"></div>
 </div>
</div>
</body>
</html>

위 코드는 body 요소의 왼쪽부터 내부 요소의 크기를 반환합니다.

이 속성에는 특정 호환성 문제가 있습니다. 자세한 내용은 offsetleft 호환성에 대한 간략한 소개 장을 참조하세요.

ps: js에서 offsetLeft 속성의 구체적인 역할은 무엇입니까?

객체와 문서 사이의 왼쪽 거리(브라우저의 왼쪽 가장자리)를 결정할 수 있습니다. 예를 들어, div를 작성하고 div를 얻은 경우 경고(div.offsetLeft)를 사용하여 브라우저 왼쪽으로부터 현재 거리를 확인할 수 있습니다. 물론 이를 사용하여 객체에 값을 할당할 수도 있습니다. Offset은 Left뿐만 아니라 JS에서 매우 유용한 속성인 offsetTop, offsetWidth 및 offsetHeight도 포함합니다.

성명：

이전 기사：JavaScript 개폐식 메뉴 표시줄 구현 code_javascript 기술다음 기사：JavaScript 개폐식 메뉴 표시줄 구현 code_javascript 기술

javascript_javascript 스킬 중 offsetleft 속성 사용법에 대한 자세한 설명

관련 기사