jQuery学习-尺寸坐标

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>访问元素的尺寸与坐标</title>
        <script src="js/jquery.js"></script>
        <style>
            .big{
                position: absolute;
                left: 50px;
                top: 100px;
                width: 400px;
                height: 450px;
                background-color: #C0C0C0;
                overflow: auto;
            }
            
            .small{
                margin: 50px;
                padding: 30px;
                border: 20px solid blue;
                width: 200px;
                background-color: orange;
            }
        </style>
    
        <script type="text/javascript">    
            //页面加载完成简写形式
            $(function(){
                //取得DIV高和宽
                var w=$(".big").width();
                var h=$(".big").height();
                console.info("高:"+h+",宽:"+w);
                
                //获取DIV位置信息 ppsition方法 取得左上角位置坐标
                var p = $(".big").position();
                console.info("位置信息:上"+p.top+",左"+p.left+");
                console.info("内部尺寸为:"+$(".small").offset().left+","+$(".small").height())
                
            
            })
        
        </script>
    </head>
    <body>
        <div class="big">
            <div class="small">
                XXXXXXXXXXXXXXXXX</br>
                XXXXXXXXXXXXXXXXX</br>
                XXXXXXXXXXXXXXXXX</br>
                XXXXXXXXXXXXXXXXX</br>
                XXXXXXXXXXXXXXXXX</br>
                
            </div>
        </div>
    </body>
</html>

 

posted @ 2016-11-16 16:07  whzym111  阅读(150)  评论(0)  编辑  收藏  举报