ClientWidth hossasy

clientWidth hossasy element iňini çäkleriň içinde padding bilen bilelikde, ýöne border we skroll ýok.

Gramer

javascriptelement.clientWidth;

Mysal

Elementiň ölçegini tapaýalyň:

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);

Kod ýerine ýetirilenden soňky netije:

javascript130

Mysal

Eger elementde skroll peýda bolsa, onda mazmunyň iňi skroll iňine görä azalýar (takmynan 16px - brauzere, operasiýa ulgamyna, enjama bagly). Indiki mysalda element iňi gözläninden kiçi bolar:

html<div id="elem">Bu elementde skroll bar.</div>

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

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

Kod ýerine ýetirilenden soňky netije:

javascript114 (brauzere bagly)

Mysal

Eger element gizlenen bolsa, onda clientWidth 0 deň bolar:

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

css#elem {
  display: none; /* gizlenen element */
  width: 100px;
  height: 100px;
  border: 10px solid black;
  padding: 15px;
}

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

Kod ýerine ýetirilenden soňky netije:

javascript0

Şeýle-de göz aňyňyz