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 հատկության արժեքը