Хосияти clientWidth

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

Синтаксис

унсур.clientWidth;

Намуна

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

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

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

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

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

130

Намуна

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

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

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

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

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

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

Намуна

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

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

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

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

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

0

Нигаред низ

хосияти clientHeight,
ки баландии унсурро дар дохили сарҳаддҳо дар бар мегирад
усули getComputedStyle,
ки қимати хосияти CSS-и унсурро мегирад