微客导航 » 文章资讯 » JavaScript中clientWidth,offsetWidth,scrollWidth的区别

JavaScript中clientWidth,offsetWidth,scrollWidth的区别

2023-07-06 09:17:03 179

一、概念

它们都是Element的属性，表示元素的宽度：

Element.clientWidth 内容+内边距-滚动条-----不包括边框和外边距 == 可视内容
Element.scrollWidth 内容+内边距+溢出尺寸-----不包括边框和外边距 ==实际内容
Element.offsetWidth 元素的宽度（内容+内边距+边框+滚动条）==整体，整个控件

二、举例

1、仅有横向滚动条的情况





测试scrollWidth、clientWidth、offsetWidth

body,html{
margin:0px;
padding:0px;
}

#father{
width:300px;
overflow:auto;
padding:10px;
background:rebeccapurple;
border:10pxsolidred;
margin:20px;
}

#child{
height:100px;
width:1000px;
padding:10px;
border:20pxsolid#ffcc99;
margin:30px;
}

varchild=document.getElementById("child"); console.log("child.width:",window.getComputedStyle(child).width);//内容的宽度：1000px console.log("child.clientWidth:",child.clientWidth);//内容+内边距-滚动条-----不包括边框和外边距==可视内容1020px console.log("child.scrollWidth:",child.scrollWidth);//内容+内边距+溢出尺寸-----不包括边框和外边距==实际内容1020px console.log("child.offsetWidth:",child.offsetWidth);//元素的宽度（内容+内边距+边框+滚动条）==整体，整个控件1060px varfather=document.getElementById("father"); console.log("father.width:",window.getComputedStyle(father).width);//内容的宽度：300px console.log("father.clientWidth:",father.clientWidth);//内容+内边距-滚动条-----不包括边框和外边距==可视内容320px console.log("father.scrollWidth:",father.scrollWidth);//内容+内边距+溢出尺寸-----不包括边框和外边距==实际内容1100px console.log("father.offsetWidth:",father.offsetWidth);//元素的宽度（内容+内边距+边框+滚动条）==整体，整个控件340px

仅有横向滚动条的情况时，父元素收受到子元素宽度的影响，其他比较特别的是scrollWidth。

父元素的scrollWidth是：子元素的content+padding+border+子元素一边的margin+父元素一边的padding。

2、有横向滚动条和竖向滚动条的情况





测试scrollWidth、clientWidth、offsetWidth

body,html{
margin:0px;
padding:0px;
}

#father{
height:50px;
width:300px;
overflow:auto;
padding:10px;
background:rebeccapurple;
border:10pxsolidred;
margin:20px;
}

#child{
height:100px;
width:1000px;
padding:10px;
border:20pxsolid#ffcc99;
margin:30px;
}

varchild=document.getElementById("child"); console.log("child.width:",window.getComputedStyle(child).width);//内容的宽度：1000px console.log("child.clientWidth:",child.clientWidth);//内容+内边距-滚动条-----不包括边框和外边距==可视内容1020px console.log("child.scrollWidth:",child.scrollWidth);//内容+内边距+溢出尺寸-----不包括边框和外边距==实际内容1020px console.log("child.offsetWidth:",child.offsetWidth);//元素的宽度（内容+内边距+边框+滚动条）==整体，整个控件1060px varfather=document.getElementById("father"); console.log("father.width:",window.getComputedStyle(father).width);//内容的宽度：285px console.log("father.clientWidth:",father.clientWidth);//内容+内边距-滚动条-----不包括边框和外边距==可视内容305px console.log("father.scrollWidth:",father.scrollWidth);//内容+内边距+溢出尺寸-----不包括边框和外边距==实际内容1100px console.log("father.offsetWidth:",father.offsetWidth);//元素的宽度（内容+内边距+边框+滚动条）==整体，整个控件340px

父元素的width为：父元素的content宽度-滚动条的宽度（大约为15px）

父元素的clientWidth为：父元素的content宽度+父元素padding宽度-滚动条宽度（大约为15px）

以上就是Element中clientWidth,offsetWidth,scrollWidth的区别的详细内容，更多关于clientWidth,offsetWidth,scrollWidth的区别的资料请关注毛票票其它相关文章！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

JavaScript中clientWidth,offsetWidth,scrollWidth的区别

一、概念

二、举例

1、仅有横向滚动条的情况

2、有横向滚动条和竖向滚动条的情况

热门推荐

随机推荐