JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义

不全

于 2021-08-14 16:45:10 发布

阅读量1k

点赞数

分类专栏： Javascript相关文章标签： width height clientWidth offisetWidth scrollWidth

本文链接：https://blog.csdn.net/zp19860529/article/details/119701514

版权

Javascript相关专栏收录该内容

32 篇文章 0 订阅

订阅专栏

JQuery中：

1、width()方法用于获得元素内容所占的宽度；

2、innerWidth()方法用于获得包括内边界（padding）的元素宽度；

算式：innerWidth()=width()+padding(左右)

3、outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度；

算式：outerWidth()=width()+padding(左右)+border(左右)

4、outerWidth()方法的参数为true（如：$(this).outerWidth(true)）则外边界(margin)也会被包括进来，即获得包括外边框(margin)、内边界(padding)和边框(border)的元素宽度。

算式：outerWidth()=width()+padding(左右)+border(左右)+margin(左右)

5、同理，innerHeight方法与outerHeight方法也是用同样的方法计算相应的高度。
所以说：对于同一个元素应该是：width()<=innerWidth()<=outerWidth()<=outerWidth(true);

JS中：

1、div.style.width 用于获得元素内容所占的宽度，等同于JQuery中的width()，style.height同理；

2、div.clientWidth 元素可见区域的宽度，包括内边界（padding），等同于JQuery中的innerWidth()，clientHeight 同理；（不包括滚动条和边框线）

算式：div.clientWidth=div.style.width +padding(左右)

3、div.offsetWidth 元素可见区域的宽度，包括内边界（padding）和边框线(border)，等同于JQuery中的outerWidth()，div.offsetHeight 同理；（包括滚动条和边框线）

算式：div.offsetWidth =div.style.width +padding(左右)+border(左右)

4、div.scrollWidth 元素内正文区域的宽度，有子元素且未超出父元素宽度时或无子元素时，等同于div.clientWidth ，若有子元素且超出父元素宽度，此时宽度为子元素的offsetWidth+父元素的padding(左或右)；div.scrollHeight同理；（不包括滚动条和边框线）

5、scrollLeft:设置或获取位于父元素左边界和子元素中目前可见内容的最左端之间的距离；scrollTop同理。（不包含父级的border宽度）

6、clientLeft: 获取对象的border宽度；clientTop：获取对象的border高度

7、offsetParent :当前对象的上级层对象.

8、offsetLeft ：当前对象到其上级层左边的距离。等同于JQuery中的offset().left。（不包含父级的border宽度）

不能对其进行赋值.设置对象到其上级层左边的距离请用style.left属性。若上级未指定position样式，则是当前对象到其body左边的距离。

style.left当前对象到其上级层左边的距离。

区别：1)style.left返回值除了数字外还带有单位px；

2)如对象到其上级层左边的距离设定值为百分比，

style.left返回此百分比,而offsetLeft则返回到其上级层左边的距离的值；

3)如果没有给 HTML 元素指定过 left样式，则 style.left返回的是空字符串；

9、offsetTop :当前对象到其上级层顶部边的距离。等同于JQuery中的offset().top。（不包含父级的border高度）

不能对其进行赋值.设置对象到上级层顶部边的距离请用style.top属性。若上级未指定position样式，则是当前对象到其body顶部的距离。

style.top当前对象到其上级层顶部边的距离。

区别：1)style.top返回值除了数字外还带有单位px；

2)如对象到其上级层顶部边的距离设定值为百分比，

style.top返回此百分比,而offsetTop则返回到其上级顶部边的距离的值；

3)如果没有给 HTML 元素指定过 top样式，则 style.top返回的是空字符串；

注意：如果上级层为body，由于IE、FF对padding、margin的解释不一样所以要明确规定处理不是下列的区别就不成立了。

windowt和body相关的的一些宽高

网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;

在一些浏览器中宽高的计算公式

IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border

IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height

各宽高示意图

代码示例

未指定border、padding时的情况：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


</head>

<body>


    <div id="parent" style="background-color: red; width: 300px;height: 300px;overflow: auto;">
        父级div
        <div id="sub" style="background-color: rgb(110, 122, 158);width:350px;height:350px;">
            子级div
        </div>
    </div>

    <script>
        console.log("父级div元素输出");
        var parDiv = document.getElementById("parent");
        console.log("clientWidth*clientHeight", parDiv.clientWidth + "x" + parDiv.clientHeight);
        console.log("offsetWidth*offsetHeight", parDiv.offsetWidth + "x" + parDiv.offsetHeight);
        console.log("scrollWidth*scrollHeight", parDiv.scrollWidth + "x" + parDiv.scrollHeight);
        console.log("scrollTop*scrollLeft", parDiv.scrollTop + "x" + parDiv.scrollLeft);
        console.log("style.width*style.height", parDiv.style.width + "x" + parDiv.style.height);
        console.log("clientLeft*clientTop", parDiv.clientLeft + "x" + parDiv.clientTop);

        console.log("子级div元素输出");
        var subDiv = document.getElementById("sub");
        console.log("clientWidth*clientHeight", subDiv.clientWidth + "x" + subDiv.clientHeight);
        console.log("offsetWidth*offsetHeight", subDiv.offsetWidth + "x" + subDiv.offsetHeight);
        console.log("scrollWidth*scrollHeight", subDiv.scrollWidth + "x" + subDiv.scrollHeight);
        console.log("scrollTop*scrollLeft", subDiv.scrollTop + "x" + subDiv.scrollLeft);
        console.log("style.width*style.height", subDiv.style.width + "x" + subDiv.style.height);
        console.log("offsetLeft*offsetTop", subDiv.offsetLeft + "x" + subDiv.offsetTop);
    </script>

</body>

</html>

为两个div增加border、padding时的情况

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


</head>

<body>


    <div id="parent" style="background-color: red; width: 300px;height: 300px;border: 1px solid;padding: 3px;margin: 4px;overflow: auto;">
        父级div
        <div id="sub" style="background-color: rgb(110, 122, 158);width:350px;height:350px;border: 1px solid;padding: 3px;">
            子级div
        </div>
    </div>

    <script>
        console.log("父级div元素输出");
        var parDiv = document.getElementById("parent");
        console.log("clientWidth*clientHeight", parDiv.clientWidth + "x" + parDiv.clientHeight);
        console.log("offsetWidth*offsetHeight", parDiv.offsetWidth + "x" + parDiv.offsetHeight);
        console.log("scrollWidth*scrollHeight", parDiv.scrollWidth + "x" + parDiv.scrollHeight);
        console.log("scrollTop*scrollLeft", parDiv.scrollTop + "x" + parDiv.scrollLeft);
        console.log("style.width*style.height", parDiv.style.width + "x" + parDiv.style.height);
        console.log("clientLeft*clientTop", parDiv.clientLeft + "x" + parDiv.clientTop);

        console.log("子级div元素输出");
        var subDiv = document.getElementById("sub");
        console.log("clientWidth*clientHeight", subDiv.clientWidth + "x" + subDiv.clientHeight);
        console.log("offsetWidth*offsetHeight", subDiv.offsetWidth + "x" + subDiv.offsetHeight);
        console.log("scrollWidth*scrollHeight", subDiv.scrollWidth + "x" + subDiv.scrollHeight);
        console.log("scrollTop*scrollLeft", subDiv.scrollTop + "x" + subDiv.scrollLeft);
        console.log("style.width*style.height", subDiv.style.width + "x" + subDiv.style.height);
        console.log("offsetLeft*offsetTop", subDiv.offsetLeft + "x" + subDiv.offsetTop);
    </script>

</body>

</html>

不全

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义

JQuery中：1、width()方法用于获得元素内容所占的宽度；2、innerWidth()方法用于获得包括内边界（padding）的元素宽度；算式：innerWidth()=width()+padding(左右)3、outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度；算式：outerWidth()=width()+padding(左右)+border(左右)4、outerWidth()方法的参数为true（如：$(this).oute
复制链接

扫一扫