jQuery学习-尺寸坐标

时间：2024-07-04 11:05:26

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>

相关文章