master

分支 (1)

管理

管理

master

JavaScript-learning
/
offset
/
offsetLeft.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>offsetLeft</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			#div1{
				margin: 30px;
				width: 100px; height: 100px;
				background-color: red;
				position: relative;
			}
			#div2{
				margin: 20px;
				width: 50px; height: 50px;
				background-color: gray;
			}
		</style>
		<script type="text/javascript">
			// var   /vɑr/
			// alert   /əˈlɜːrt/
			// document  /ˈdɒkjumənt/
			// onload   /ˌɒnˈləʊd/
			// getElementById   /ɡet  elɪmənt  baɪ  aɪ ˈdiː/
			// currentStyle   /kɜːrənt  staɪl/
			// getComputedStyle    /ɡet  kəmˈpjuːtɪd  staɪl/
			// offsetLeft    /ɒfset  left/

			//解决兼容问题的获取Style方法
			function getStyle(node, cssStyle){
				return node.currentStyle ? node.currentStyle[cssStyle] : getComputedStyle(node)[cssStyle];
			}

			// offsetLeft获取当前节点对其主窗体的左边相对距离

			window.onload = function(){
				var Odiv1 = document.getElementById("div1");
				var Odiv2 = document.getElementById("div2");

				alert(Odiv1.offsetLeft);   //30
				//默认情况下div2是以整个窗体为相对位置的。
				// alert(Odiv2.offsetLeft);   //50
				//当在div1的css样式中添加position: relative;，则div1中的子节点都是以div1为相对位置
				alert(Odiv2.offsetLeft);   //20
			}

		</script>
	</head>
	<body>
		<div id="div1">
			<div id="div2"></div>
		</div>
	</body>
</html>