快捷導(dǎo)航

JavaScript中clientWidth,offsetWidth,scrollWidth的區(qū)別

更新時(shí)間：2021年01月25日 09:15:19 作者：guo&qi

這篇文章主要介紹了Element中clientWidth,offsetWidth,scrollWidth的區(qū)別，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下

一、概念

　　它們都是Element的屬性，表示元素的寬度：

Element.clientWidth 內(nèi)容+內(nèi)邊距-滾動(dòng)條-----不包括邊框和外邊距 == 可視內(nèi)容
Element.scrollWidth 內(nèi)容+內(nèi)邊距+溢出尺寸-----不包括邊框和外邊距 ==實(shí)際內(nèi)容
Element.offsetWidth 元素的寬度（內(nèi)容+內(nèi)邊距+邊框+滾動(dòng)條）==整體，整個(gè)控件

二、舉例

1、僅有橫向滾動(dòng)條的情況

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>測(cè)試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); //內(nèi)容的寬度：1000px
 console.log("child.clientWidth:", child.clientWidth); //內(nèi)容+內(nèi)邊距-滾動(dòng)條-----不包括邊框和外邊距 == 可視內(nèi)容 1020px
 console.log("child.scrollWidth:", child.scrollWidth); //內(nèi)容+內(nèi)邊距+溢出尺寸-----不包括邊框和外邊距 ==實(shí)際內(nèi)容 1020px
 console.log("child.offsetWidth:", child.offsetWidth); //元素的寬度（內(nèi)容+內(nèi)邊距+邊框+滾動(dòng)條）==整體，整個(gè)控件  1060px

 var father = document.getElementById("father");
 console.log("father.width:", window.getComputedStyle(father).width); //內(nèi)容的寬度：300px
 console.log("father.clientWidth:", father.clientWidth); //內(nèi)容+內(nèi)邊距-滾動(dòng)條-----不包括邊框和外邊距 == 可視內(nèi)容 320px
 console.log("father.scrollWidth:", father.scrollWidth); //內(nèi)容+內(nèi)邊距+溢出尺寸-----不包括邊框和外邊距 ==實(shí)際內(nèi)容 1100px
 console.log("father.offsetWidth:", father.offsetWidth); //元素的寬度（內(nèi)容+內(nèi)邊距+邊框+滾動(dòng)條）==整體，整個(gè)控件  340px
</script>
</body>
</html>

　　僅有橫向滾動(dòng)條的情況時(shí)，父元素收受到子元素寬度的影響，其他比較特別的是scrollWidth。

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

2、有橫向滾動(dòng)條和豎向滾動(dòng)條的情況

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>測(cè)試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); //內(nèi)容的寬度：1000px
 console.log("child.clientWidth:", child.clientWidth); //內(nèi)容+內(nèi)邊距-滾動(dòng)條-----不包括邊框和外邊距 == 可視內(nèi)容 1020px
 console.log("child.scrollWidth:", child.scrollWidth); //內(nèi)容+內(nèi)邊距+溢出尺寸-----不包括邊框和外邊距 ==實(shí)際內(nèi)容 1020px
 console.log("child.offsetWidth:", child.offsetWidth); //元素的寬度（內(nèi)容+內(nèi)邊距+邊框+滾動(dòng)條）==整體，整個(gè)控件  1060px

 var father = document.getElementById("father");
 console.log("father.width:", window.getComputedStyle(father).width); //內(nèi)容的寬度：285px
 console.log("father.clientWidth:", father.clientWidth); //內(nèi)容+內(nèi)邊距-滾動(dòng)條-----不包括邊框和外邊距 == 可視內(nèi)容 305px
 console.log("father.scrollWidth:", father.scrollWidth); //內(nèi)容+內(nèi)邊距+溢出尺寸-----不包括邊框和外邊距 ==實(shí)際內(nèi)容 1100px
 console.log("father.offsetWidth:", father.offsetWidth); //元素的寬度（內(nèi)容+內(nèi)邊距+邊框+滾動(dòng)條）==整體，整個(gè)控件  340px
</script>
</body>
</html>

　　父元素的width為：父元素的content寬度-滾動(dòng)條的寬度（大約為15px）

　　父元素的clientWidth為：父元素的content寬度+父元素padding寬度-滾動(dòng)條寬度（大約為15px）

以上就是Element中clientWidth,offsetWidth,scrollWidth的區(qū)別的詳細(xì)內(nèi)容，更多關(guān)于clientWidth,offsetWidth,scrollWidth的區(qū)別的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: