访问元素的尺寸和坐标

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>访问元素的尺寸和坐标</title>
    <style type="text/css"> .big{ position: absolute; left:50px; top:100px; width: 400px; height: 450px; background-color: #ccc; overflow: auto; } .small{ margin: 50px; padding: 30px; border: 20px solid blue; width:200px; background-color: aqua; } </style>
</head>
<body>
<div class="big">
    <div class="small">
        XXXXXXXXXXXXXXXXXXXXXXX<br/>
        XXXXXXXXXXXXXXXXXXXXXXX<br/>
        XXXXXXXXXXXXXXXXXXXXXXX<br/>
        XXXXXXXXXXXXXXXXXXXXXXX<br/>
        XXXXXXXXXXXXXXXXXXXXXXX<br/>
        XXXXXXXXXXXXXXXXXXXXXXX<br/>
        XXXXXXXXXXXXXXXXXXXXXXX<br/>
        XXXXXXXXXXXXXXXXXXXXXXX<br/>
        XXXXXXXXXXXXXXXXXXXXXXX<br/>
        XXXXXXXXXXXXXXXXXXXXXXX<br/>
        XXXXXXXXXXXXXXXXXXXXXXX<br/>
        XXXXXXXXXXXXXXXXXXXXXXX<br/>
        XXXXXXXXXXXXXXXXXXXXXXX
    </div>
</div>


<script type="application/javascript" src="js/jquery-1.8.3.min.js"></script>
<script> $(function(){ var w = $(".big").width();//width()方法用于获取内容的宽度 var h = $(".big").height();//width()方法用于获取内容的高度 console.info("外框宽度为:"+w+"外框高度为:"+h); //获取坐标 var p=$(".big").position();//position()用于获取左上角的坐标 console.info("外框左上角定点坐标为:"+p.left+","+ p.top); //得到内框的宽度和高度 console.info("内框宽度为"+$(".small").width()+";内框的高度为"+$(".small").height()); //求内框坐标不能用position() //position()是当前节点相对于父节点的位移量,offset用于获取指定组件与窗口之间的距离 console.info("外框左上角定点坐标为:"+$(".small").offset().left+","+$(".small").offset().top); //得到内框的内部尺寸(不包含边框) console.info("内框的内部尺寸为:" + $(".small").innerWidth() +","+ $(".small").innerHeight()); //得到内框的外部尺寸(不包含外边距) console.info("内框的外部尺寸为:"+$(".small").outerWidth() +"," + $(".small").outerHeight()); //得到内框的外部尺寸(包含外边距) //设置为true的时候,则包含外边距 console.info("内框的外部尺寸(包含外边距):"+$(".small").outerWidth(true) +"," + $(".small").outerHeight(true)); }) </script>
</body>
</html>

你可能感兴趣的:(offset,innerWidth,outerWidth)