javascript layerX和layerY属性
分类：实例代码
本章节通过代码实例简单介绍一下标题中两个属性的作用，希望能够给需要的朋友带来一定的帮助。
两个属性的用法应该是一样的，区别只是在方位上，所以这里只介绍layerY，那么layerY也就不难理解了。
layerY属性作用:
如果元素的position样式不是默认的static,，说明这个元素具有定位属性。
在当前触发鼠标事件的元素和它的祖先元素中找到最近的具有定位属性的元素，计算鼠标与其的偏移值，以找到元素的border的左上角的外交点作为相对点。如果找不到具有定位属性的元素，那么就相对于当前页面计算偏移，此时等同于pageY，上面这句话是针对IE浏览器。在其他浏览器中，总是以最近的父元素的border的左上角的外交点作为相对点。
图示如下:
浏览器支持:
（1）.IE9和IE9以上浏览器支持此属性。
（2）.谷歌浏览器支持此属性。
（3）.火狐浏览器支持此属性。
（4）.opera浏览器支持此属性。
（5）.safria浏览器支持此属性。
代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
#box{
width:500px;
height:400px;
margin:0px auto;
background:blue;
}
#middle{
width:300px;
height:200px;
margin:0px auto;
background:green;
position:relative;
overflow:hidden;
}
#inner{
width:100px;
height:100px;
background:#000000;
margin:0px auto;
margin-top:10px;
text-align:center;
line-height:100px;
color:white;
}
</style>
<script>
window.onload=function(){
var odiv=document.getElementById("inner");
odiv.onclick=function(ev){
odiv.innerHTML=ev.layerY;
}
}
</script>
</head>
<body>
<div id="box">
<div id="middle">
<div id="inner"></div>
</div>
</div>
</body>
</html>