offsetleft 호환성_javascript 기술에 대한 이해에 대해 이야기하십시오.
- WBOY원래의
- 2016-05-16 15:32:431460검색
이 속성의 기본 사용법은 offsetleft 속성 사용법에 대한 자세한 설명 장을 참조하세요.
이 속성에는 특정 호환성 문제가 있습니다. 즉, IE7 브라우저에서는 반환 값이 가장 가까운 상위 요소의 왼쪽 거리입니다.
<!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>
위 코드는 다른 브라우저에서는 100이라는 값을 반환하지만, IE7에서는 50이라는 값을 반환합니다.
IE6의 경우 테스트가 없습니다. 관심이 있으시면 테스트를 하시면 됩니다.
offsetLeft와 style.left의 차이점을 잠시 소개하겠습니다
offsetLeft는 상위 개체를 기준으로 왼쪽 여백을 가져옵니다
왼쪽은 위치 속성이 있는 상위 객체를 기준으로
왼쪽 여백을 가져오거나 설정합니다(위치는 상대적으로 정의됨).상위 div의 위치가 상대 위치로 정의되고 하위 div의 위치가 절대 위치로 정의된 경우 하위 div의 style.left 값은 상위 div의 값을 기준으로 합니다.
이는 offsetLeft와 동일하며 차이점은 다음과 같습니다.
1. style.left는 28px와 같은 문자열을 반환하고 offsetLeft는 값 28을 반환합니다. 얻은 값을 계산해야 하는 경우
offsetLeft를 사용하는 것이 더 편리합니다.
2. style.left는 읽기-쓰기이고 offsetLeft는 읽기 전용이므로 div의 위치를 변경하려면 style.left만 수정하면 됩니다.
3. style.left 값을 미리 정의해야 합니다. 그렇지 않으면 얻은 값이 비어 있게 됩니다. 그리고 html로 정의해야 합니다.
에 정의되어 있는지 실험을 해봤습니다.
CSS에서 style.left의 값은 여전히 비어 있습니다. 이것이 처음에 발생한 문제입니다. 항상 style.left의 값을 얻을 수 없습니다.
offsetLeft는 div의 위치를 미리 정의하지 않고도 얻을 수 있습니다.