【技术分享】WEB前端全栈成长计划(二阶段)-jQuery之DOM进阶篇(3)

前两篇我们已经学习了如何通过jQuery操作DOM文档添加和修改html的各种元素，在各种示例演示过程中相信大家已经发现通过js进行的各种操作在浏览器中是无刷新更新的，这对于用户来说是非常好的体验，但大家有没有关注到一个问题就是窗口尺寸的变化，当我们使用静态布局的时候使用的是自己开发环境的浏览器尺寸，在无法确认客户浏览器的尺寸的情况下，我们的静态布局在别人电脑上的可视效果会大打折扣，那我们如何解决这个问题呢?jQuery中也给我们提供了处理html元素尺寸方法。

本篇主要讲解如何通过jQuery来处理html元素尺寸,并通过获取body的尺寸来设定我们设置的html元素尺寸，来处理客户端上浏览器的尺寸变化的响应。

尺寸方法

jQuery提供了多个处理尺寸的方法

• width() 设置或获取html元素的宽度，不包括边框和内外边距

• height() 设置或获取html元素的高度，不包括边框和内外边距

• innerWidth() 获取html元素的宽度，仅包括内边距

• innerHeiht() 获取html元素的高度，仅包括内边距

• outerWidth() 获取html元素的宽度，仅包括边框和内边距

• outerHeight() 获取html元素的高度，仅包括边框和内边距

扩展阅读：window 浏览器对象模型（BOM）

• 扩展部份可自行学习，主要是了解一下如何通过JavaScript获取浏览器window属性的方法

演示代码通用部份

    <style>
        body{
            width:600px;
            height:600px;
            margin:10px;
            padding:10px;
            border:1px solid black;
            background-color: pink;
            color:black;
        }
        #div1{
            width:300px;
            height:300px;
            margin:10px;
            padding:10px;
            border:1px solid blue;
            background-color:gray;
            color:white;
        }
 
    </style>
    <div id="div1">我是div1,我在body内</div>
    <p id="p1"></p>
    <p id="p2"></p>
    <p id="p3"></p>
    <p id="p4"></p>

width() 、height()使用

• width() 设置或获取html元素的宽度，不包括边框和内外边距

• height() 设置或获取html元素的高度，不包括边框和内外边距

    <button id="btn1">width/height()获取div1和body宽与高</button></br>
 
    <script>
        $("#btn1").click(function(){
            bodyWidth=$("body").width();
            bodyHeight=$("body").height();
            div1Width=$("#div1").width();
            div1Height=$("#div1").height();
            $("#p1").text('body width():'+ bodyWidth +' '+'height():'+ bodyHeight);
            $("#p2").text('div1 width():'+ div1Width +' '+'height():'+ div1Height);
 
        });
</script>

innerWidth()、innerHeight()使用

• innerWidth() 获取html元素的宽度，仅包括内边距

• innerHeiht() 获取html元素的高度，仅包括内边距

    <button id="btn2">innerWidth/innerHeight()获取div1宽与高</button></br>
 
    <script>
        $("#btn2").click(function(){
            div1innerWidth=$("#div1").innerWidth();
            div1innerHeight=$("#div1").innerHeight();
            $("#p3").text('div1 innerWidth():'+ div1innerWidth +' '+'innerHeight():'+ div1innerHeight);
 
        });
</script>

outerWidth()、outerHeight()使用

• outerWidth() 获取html元素的宽度，仅包括边框和内边距

• outerHeight() 获取html元素的高度，仅包括边框和内边距

    <button id="btn3">outerWidth/outerHeight()获取div1宽与高</button></br>
 
    <script>
        $("#btn3").click(function(){
            div1outerWidth=$("#div1").outerWidth();
            div1outerHeight=$("#div1").outerHeight();
            $("#p4").text('div1 outerWidth():'+ div1outerWidth +' '+'outerHeight():'+ div1outerHeight);
 
        });
</script>

根据body尺寸设置html元素尺寸

通过prompt模拟body的尺寸来改变div1的大小,当静态布局完成后,我们可以根据body的尺寸来改变我们布局中html元素的各种属性来保证客户端窗口显示效果，当然现在有很多成熟的前端框架本身都具备这种能力，在这里只是例举一个思路。

    <button id="btn4">输入body尺寸改变div1大小</button>
 
    <script>
        $("#btn4").click(function(){
            bodyWidth = prompt("请输入body的width值");
            $("body").css("width",bodyWidth);
            if (bodyWidth > 1000){
                $("#div1").css("width",400)
            }else{
                $("#div1").css("width",100)
            }
        });
</script>

box-sizing 属性的影响

当html元素设置box-sizing属性后，通过width/innerWidth/outerWidth()等方法获取元素width属性时会减去padding和border的值,height方法获取时也亦是如此。

    <style>
        #div2{
            width:100px;
            height:100px;
            padding:10px;
            border:10px solid black;
            box-sizing:border-box;
            background-color:red;
        }
    </style>
    <div id="div2"></div>
    <p id="p5"></p>
    <p id="p6"></p>
    <p id="p7"></p>
 
    <button id="btn5">box-sizing属性对三种方法获取宽度的影响</button>
 
    <script>
        div2Width=$("#div2").width();
        div2innerWidth=$("#div2").innerWidth();
        div2outerWidth=$("#div2").outerWidth();
        $("#btn5").click(function(){
            $("#p5").text('div2 Width():'+ div2Width);
            $("#p6").text('div2 innerWidth():'+ div2innerWidth);
            $("#p7").text('div2 outerWidth():'+ div2outerWidth);
        });
</script>

写到这里jQuery之DOM进阶篇就结束了，希望能对和我一样的初学者有所帮助！

书山有路勤为径，学海无涯苦作舟!!!

zhoubo

2020.8.10 at home