jquery尺寸

尺寸

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jquery尺寸</title>
        <script src="../js/jquery-1.8.3.js"></script>
        <script src="../js/jquery-1.4.2.js"></script>
        <script>
            /*
             * jQuery 尺寸 方法
             * jQuery 提供多个处理尺寸的重要方法：
             * width()
             * height()
             * innerWidth()
             * innerHeight()
             * outerWidth()
             * outerHeight()
             */
            $(document).click(function(){
                /*
                 * jQuery width() 和 height() 方法
                 * width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
                 * height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
                 * 下面的例子返回指定的 <div> 元素的宽度和高度：
                 */
                $("#btn1").click(function(){
                    var txt="";
                    txt+="Width of div:"+$("#div1").width()+"</br>";
                    txt+="Height of div:"+$("#div1").height();
                    $("#div1").html(txt);
                });
                
                /*
                 * jQuery innerWidth() 和 innerHeight() 方法
                 * innerWidth() 方法返回元素的宽度（包括内边距）。
                 * innerHeight() 方法返回元素的高度（包括内边距）。
                 * 下面的例子返回指定的 <div> 元素的 inner-width/height：
                 */
                $("#btn2").click(function(){
                    var txt="";
                    txt+="Inner width of div:"+$("#div1").innerWidth()+"</br>";
                    txt+="Inner height of div:"+$("#div1").innerHeight();
                    $("#div1").html(txt);
                });
                
                /*
                 * jQuery outerWidth() 和 outerHeight() 方法
                 * outerWidth() 方法返回元素的宽度（包括内边距和边框）。
                 * outerHeight() 方法返回元素的高度（包括内边距和边框）。
                 * 下面的例子返回指定的 <div> 元素的 outer-width/height：
                 */
                $("#btn3").click(function(){
                    var txt="";
                    txt+="Outer width of div:"+$("#div1").outerWidth()+"</br>";
                    txt+="Outer height of div:"+$("#div1").outerHeight();
                    $("#div1").html(txt);
                });
            });
        </script>
    </head>
    <body>
        <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;">
        </div><br>
        <button id="btn1">显示 div 的尺寸</button>
        <p>width() - 返回元素的宽度。</p>
        <p>height() - 返回元素的高度。</p>
        
        <button id="btn2">显示 div 的尺寸</button>
        <p>innerWidth() - 返回元素的宽度（包括内边距）。</p>
        <p>innerHeight() - 返回元素的高度（包括内边距）。</p>
        
        <button id="btn3">显示 div 的尺寸</button>
        <p>outerWidth() - 返回元素的宽度（包括内边距和边框）。</p>
        <p>outerHeight() - 返回元素的高度（包括内边距和边框）。</p>
    </body>
</html>

 

posted @ 2019-07-17 14:45  薄眠抛却陈年事。  阅读(161)  评论(0)  编辑  收藏  举报