Почему мои clientWidth и offsetWidth равны? - PullRequest
Новая
       21

Почему мои clientWidth и offsetWidth равны?

1 голос
/ 18 февраля 2020 

var mydiv = document.getElementById("mydiv");
console.log("offset width = " + mydiv.offsetWidth);
console.log("client width = " + mydiv.clientWidth);
#div1 {
  height: 5000px;
  width: 5000px;
  background-color: #000000;
}
<div id="mydiv">
  <div id="div1"></div>
</div>

У меня есть div на веб-странице, где контент требует вертикальной полосы прокрутки. Используя javascript, я пытаюсь вычислить offsetWidth и clientWidth, чтобы в конечном итоге я мог рассчитать ширину вертикальной полосы прокрутки, но, очевидно, они равны. У меня есть:

html: 

<div id="mydiv">
  <div id="div1"></div>
</div>

css: 

#div1 {
  height: 5000px;
  width: 5000px;
  background-color: #000000;
}

js: 

var mydiv = document.getElementById("mydiv");
console.log("offset width = " + mydiv.offsetWidth);
console.log("client width = " + mydiv.clientWidth);

Ответы [ 2 ]

1 голос
/ 18 февраля 2020

Взгляните на два фрагмента, вы можете увидеть разницу с полосой прокрутки и без полосы прокрутки. 

var mydiv = document.getElementById("mydiv");
console.log("offset width = " + mydiv.offsetWidth);
console.log("client width = " + mydiv.clientWidth);
#div1 {
  height: 100px;
  width: 200px;
  background-color: #000000;
}
#mydiv{
  height:80px;
  width:160px;
  overflow:scroll
}
<div id="mydiv">
  <div id="div1"></div>
</div>

Ниже фрагмент не имеет полосы прокрутки и переполнения, поэтому ширина клиента и ширина смещения одинаковы 

var mydiv = document.getElementById("mydiv");
console.log("offset width = " + mydiv.offsetWidth);
console.log("client width = " + mydiv.clientWidth);
#div1 {
  height: 100px;
  width: 200px;
  background-color: purple;
}
<div id="mydiv">
  <div id="div1"></div>
</div>
1 голос
/ 18 февраля 2020

Основное различие между clientWidth и offsetWidth:

(1) clientWidth - внутренняя ширина (ie. Пространство внутри элемента, включая отступы, но исключая границы и полосы прокрутки)

(2) offsetWidth - это внешняя ширина (ie. Пространство, занимаемое элементом, включая отступы и границы)

Как я вижу в вашем CSS границы и полосы прокрутки отсутствуют, поэтому вы получаете одинаковую ширину в обоих случаях.

Я обновил CSS, и теперь вы получите разные значения. Пожалуйста, проверьте ниже фрагмент: 

var mydiv = document.getElementById("mydiv");
console.log("offset width = " + mydiv.offsetWidth);
console.log("client width = " + mydiv.clientWidth);
#mydiv {
        padding: 20px;
        border: 20px solid red;
      }
<div id="mydiv">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
  </div>
...