jQuery与原生js部分方法的差异innerWidthouterWidthoffset

66 阅读 0 评论 44 点赞

我是靠谱客的博主火星上花生，最近开发中收集的这篇文章主要介绍jQuery与原生js部分方法的差异innerWidthouterWidthoffset，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

innerWidth

在原生js中该属性用于获取页面可以区域的宽度不包含滚动条的宽度，并且该属性元素并不能使用，只能是window才能有效

 console.log(window.innerWidth);
    console.log($(".box").get(0).innerWidth);

在这里插入图片描述
但是在jQuery中innerWidth是一个方法，该方法不仅window有效，而且元素也可以使用，元素使用获取到的是元素的内部宽度，也就是content区域+padding的宽度。

 <div class="box">
 Lorem, ipsum.
    </div>

 .box {
            width: 200px;
            height: 100px;
            background: red;
        }

 console.log($(window).innerWidth());
    console.log($(".box").innerWidth());

在这里插入图片描述
由此可见innerWidth在jQuery与原生中虽然名字一样但是其类型已经发生变化，在jQuery中是函数，在原生js中是一个属性，其作用也有差异，在jQUery中是获取或设置元素的宽度，在原生ks中是获取页面可以区域的宽度。

outerWidth

与innerWidth类似的还有outerWidth，其在jQUery中也同样是一个函数，用来获取或设置元素的外部宽度，该宽度包括border的宽度,如果在获取时传入参数true会获取包括margin在内的盒模型所有的宽度。

 <div class="box">
 Lorem, ipsum.    
    </div>

 .box {
            width: 200px;
            height: 100px;
            padding: 20px;
            background: red;
            border: 1px solid orangered;
            margin: 20px;
        }

 console.log($(".box").outerWidth());

在这里插入图片描述
如此可见其计算的是content区域的宽度+padding区域的宽度+border的宽度
接下来我们传入true

 console.log($(".box").outerWidth(true));

在这里插入图片描述
如此可见其计算的是content区域的宽度+padding区域的宽度+border的宽度+margin的宽度
但是outerWidth在原生js中获取到的是页面可视区域的宽度包括滚动条的宽度,对于元素仍然无效

 console.log($(".box").get(0).outerWidth);
    console.log(window.outerWidth);

在这里插入图片描述
此时计算的宽度包括了关东跳的宽度，该属性在jQuery中与原生js的差异相似。

offset

在jQuery中offset是一个函数，该函数返回一个对象，该对象中有top和left属性，在原生js中offsetTop和offsetLeft是分开的这是其中的一个差异。

<div class="box">
        <p>
            Lorem, ipsum dolor.
        </p>
    </div>

console.log($("p").offset());

在这里插入图片描述

另外，jQuery的offset计算的是元素距离页面top和left的距离，body有margin也会计算在内

 * {
            margin: 0;
            padding: 0;
        }
        
        body {
            margin: 20px;
        }
        
        .box {
            width: 200px;
            height: 100px;
            padding: 20px;
            background: red;
            border: 1px solid orangered;
            margin: 20px;
            position: absolute;
        }
        
        p {
            margin-top: 20px;
            position: absolute;
        }

console.log($("p").offset());

在这里插入图片描述
在原生js中offsetTop和offsetLeft计算的是距离offsetParent（也就是定位元素）的top和left的距离，如果元素的父元素和祖先元素中没有定位元素才计算距离页面的距离。

  * {
            margin: 0;
            padding: 0;
        }
        
        body {
            margin: 20px;
        }
        
        .box {
            width: 200px;
            height: 100px;
            padding: 20px;
            background: red;
            border: 1px solid orangered;
            margin: 20px;
            position: absolute;
        }
        p {
            margin-top: 20px;
        }