Eienskap clientWidth

Die eienskap clientWidth bevat die wydte van 'n element binne sy grense saam met padding, maar sonder border en scroll.

Sintaksis

javascriptelement.clientWidth;

Voorbeeld

Kom ons vind die grootte van 'n element:

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

Resultaat van die kode-uitvoering:

javascript130

Voorbeeld

As 'n element scroll kry, verminder die wydte van die inhoud met die wydte van die scroll (ongeveer 16px - hang af van die blaaier, bedryfstelsel, toestel). In die volgende voorbeeld sal die element se wydte minder wees as wat verwag is:

html<div id="elem">Hierdie element het scroll.</div>

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

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

Resultaat van die kode-uitvoering:

javascript114 (hang af van die blaaier)

Voorbeeld

As 'n element versteek is, sal clientWidth gelyk wees aan 0:

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

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

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

Resultaat van die kode-uitvoering:

javascript0

Kyk ook