Najnowsze tutoriale tworzenie stron internetowych
 

HTML DOM clientWidth Propery

<Element Przedmiot

Przykład

Uzyskaj wysokość i szerokość <div> elementu, w tym wyściółka:

var elmnt = document.getElementById("myDIV");
var txt = "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px";

Wynikiem txt będą:

Height with padding: 270px
Width with padding: 420px
Spróbuj sam "

Więcej "Try it Yourself" przykłady poniżej.

Definicja i Wykorzystanie

Nieruchomość clientWidth zwraca widzialnego szerokość elementu w pikselach, wraz z wyściółką, ale nie granicy, przewijania lub marginesu.

Powodem, dla którego "viewable" słowo jest określona, dlatego jeśli zawartość elementu jest większa niż rzeczywista szerokość elementu, ta właściwość zwróci jedynie szerokość, która jest widoczna (See "More Examples") .

Uwaga: Aby zrozumieć tę właściwość, musisz zrozumieć Box CSS model .

Wskazówka: Ta właściwość jest często używany wraz z clientHeight nieruchomości.

Wskazówka: Użyj offsetHeight i offsetWidth właściwości, aby powrócić wysokość i szerokość widocznego elementu, w tym dopełnienie, obramowanie i przewijania.

Wskazówka: Aby dodać paski przewijania do elementu, należy użyć CSS przepełnienia nieruchomości.

Ta właściwość jest tylko do odczytu.

Wsparcie przeglądarka

Nieruchomość
clientWidth tak tak tak tak tak

Składnia

element .clientWidth

Szczegóły techniczne

Zwracana wartość: Numer, reprezentujący widzialnego szerokość elementu w pikselach, w tym wyściółka
Przykłady

Więcej przykładów

Przykład

Przykład ten pokazuje różnicę pomiędzy clientHeight / clientWidth i offsetHeight / offsetWidth:

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";

Wynikiem txt będą:

Height with padding: 270px
Height with padding and border: 280px
Width with padding: 420px
Width with padding and border: 430px
Spróbuj sam "

Przykład

Przykład ten pokazuje różnicę pomiędzy clientHeight / clientWidth i offsetHeight / offsetWidth, gdy dodamy do przewijania do elementu:

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";

Wynikiem txt będą:

Height with padding: 249px
Height with padding, border and scrollbar: 280px
Width with padding: 399px
Width with padding, border and scrollbar: 430px
Spróbuj sam "

<Element Przedmiot