网络编程
位置:首页>> 网络编程>> JavaScript>> JavaScript中clientWidth,offsetWidth,scrollWidth的区别

JavaScript中clientWidth,offsetWidth,scrollWidth的区别

作者:guo&qi  发布时间:2024-04-22 22:24:59 

标签:JavaScript,clientWidth,offsetWidth,scrollWidth,区别

一、概念

它们都是Element的属性,表示元素的宽度:

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

二、举例

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试scrollWidth、clientWidth、offsetWidth</title>
<style type="text/css">
 body, html {
  margin: 0px;
  padding: 0px;
 }

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

#child {
  height: 100px;
  width: 1000px;
  padding: 10px;
  border: 20px solid #ffcc99;
  margin: 30px;
 }
</style>
</head>
<body>

<div id="father">
<div id="child"></div>
</div>

<script type="text/javascript">
var child = 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

var father = 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
</script>
</body>
</html>

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

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

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试scrollWidth、clientWidth、offsetWidth</title>
<style type="text/css">
 body, html {
  margin: 0px;
  padding: 0px;
 }

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

#child {
  height: 100px;
  width: 1000px;
  padding: 10px;
  border: 20px solid #ffcc99;
  margin: 30px;
 }
</style>
</head>
<body>

<div id="father">
<div id="child"></div>
</div>

<script type="text/javascript">
var child = 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

var father = 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
</script>
</body>
</html>

父元素的width为:父元素的content宽度-滚动条的宽度(大约为15px)

父元素的clientWidth为:父元素的content宽度+父元素padding宽度-滚动条宽度(大约为15px)

来源:https://www.cnblogs.com/gg-qq/p/14309110.html

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com