Хосияти clientWidth

Хосияти clientWidth паҳнои унсурро дар дохили сарҳаддҳо бо якҷоягии padding, вале бе border ва гардиш дар бар мегирад.

Синтаксис

javascriptунсур.clientWidth;

Намуна

Биёед андозаи унсурро пайдо кунем:

html<div id="elem"></div>

css#elem {
  width: 100px;
  height: 100px;
  border: 10px solid black;
  padding: 15px;
}

javascriptlet elem = document.querySelector('#elem');
console.log(elem.clientWidth);

Натиҷаи иҷрои рамз:

javascript130

Намуна

Агар барои унсур гардиш пайдо шавад, паҳнои мундариҷа ба паҳнои гардиш (тақрибан 16px - аз браузер, НМ, дастгоҳ вобаста аст) кам мешавад. Дар намунаи навбатӣ паҳнои унсур камтар аз он чи интизорӣ меравад, хоҳад буд:

html<div id="elem">Ин унсур гардиш дорад.</div>

css#elem {
  width: 100px;
  height: 100px;
  border: 10px solid black;
  padding: 15px;
  overflow: scroll;
}

javascriptlet elem = document.querySelector('#elem');
console.log(elem.clientWidth);

Натиҷаи иҷрои рамз:

javascript114 (аз браузер вобаста аст)

Намуна

Агар унсур пинҳон бошад, пас clientWidth ба 0 баробар хоҳад буд:

html<div id="elem"></div>

css#elem {
  display: none; /* унсури пинҳон */
  width: 100px;
  height: 100px;
  border: 10px solid black;
  padding: 15px;
}

javascriptlet elem = document.querySelector('#elem');
console.log(elem.clientWidth);

Натиҷаи иҷрои рамз:

javascript0

Нигаред низ