Atrybut clientWidth HTML DOM Element

Definicja i użycie

clientWidth Atrybut zwraca widoczną szerokość elementu, w tym wewnętrzne marginesy, ale bez ramki, paska przewijania lub marginesów zewnętrznych, w pikselach.

clientWidth Atrybut jest jedynie do odczytu.

Zobacz również:Tutorial CSS Box Model

Zobacz również:

Properties clientHeight

Properties clientTop

Properties clientLeft

Properties offsetHeight

Properties offsetWidth

Aby dodać rolkę do elementu, użyj Atrybut overflow CSS.

Przykład

Przykład 1

Pobierz wysokość i szerokość "myDIV", w tym wewnętrzne marginesy:

const element = document.getElementById("myDIV");
let text = "clientHeight: " + element.clientHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px";

Spróbuj sam

Przykład 2

Przykład 2: różnica między clientHeight/clientWidth a offsetHeight/offsetWidth

Bez ro滚条：

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

Spróbuj sam

Z ro滚条：

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

Spróbuj sam

Gramatyka

element.clientWidth

Zwracana wartość

Typ Opis
Wartość Widoczna szerokość elementu (w pikselach), w tym wewnętrzne marginesy.

Wspierane przeglądarki

Wszystkie przeglądarki wspierają element.clientWidth:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Obsługiwane Obsługiwane Obsługiwane Obsługiwane Obsługiwane Obsługiwane