zoukankan      html  css  js  c++  java
  • 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;
                     400px;
                    height: 450px;
                    background-color: #C0C0C0;
                    overflow: auto;
                }
                
                .small{
                    margin: 50px;
                    padding: 30px;
                    border: 20px solid blue;
                     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>
  • 相关阅读:
    学习进度笔记14
    学习进度笔记13
    学习进度笔记12
    学习进度笔记11
    学习进度笔记10
    学习进度笔记9
    学习进度笔记8
    学习进度笔记7
    学习进度笔记6
    微信客户端兼容性
  • 原文地址:https://www.cnblogs.com/whzym111/p/6069973.html
Copyright © 2011-2022 走看看