Atrybut offsetWidth obiektu DOM HTML Element

Definicja i użycie

offsetWidth Atrybut zwraca widoczny szerokość elementu (w pikselach), w tym wewnętrzne marginesy, ramkę i paski przewijania, ale bez zewnętrznych marginesów.

offsetWidth Atrybut jest jedynie do odczytu.

Zobacz również:Tutorial CSS okna

offsetParent

Wszystkie blokowe elementy raportują odchylenia względem odchylnego rodzica:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Odchylny rodzic to najbliższy przodowiec o niestatycznej lokalizacji.

Jeśli nie istnieje odchylny rodzic, odchylenie jest względne do treści dokumentu.

Zobacz również:

Atrybut offsetHeight

Atrybut offsetParent

Atrybut offsetTop

Atrybut offsetLeft

Atrybut clientTop

Atrybut clientLeft

Atrybut clientWidth

Atrybut clientHeight

Przykład

Przykład 1

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

const elmnt = document.getElementById("myDIV");
let text = "Wysokość z wypełnieniem i ramką: " + elmnt.offsetHeight + "px<br>";
text += "Szerokość z wewnętrznymi marginesami i ramkami: " + elmnt.offsetWidth + "px";

Spróbuj sam

Przykład 2

Różnica między clientHeight/clientWidth a offsetHeight/offsetWidth

Bez pasków przewijania:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Wysokość z wewnętrznymi marginesami: " + elmnt.clientHeight + "px<br>";
text += "Wysokość z wewnętrznymi marginesami i ramkami: " + elmnt.offsetHeight + "px<br>";
text += "Szerokość z wewnętrznymi marginesami: " + elmnt.clientWidth + "px<br>";
text += "Szerokość z wewnętrznymi marginesami i ramkami: " + elmnt.offsetWidth + "px";

Spróbuj sam

Z paskami przewijania:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Wysokość z wewnętrznymi marginesami: " + elmnt.clientHeight + "px<br>";
text += "Wysokość z wewnętrznymi marginesami, ramkami i paskami przewijania: " + elmnt.offsetHeight + "px<br>";
text += "Szerokość z wewnętrznymi marginesami: " + elmnt.clientWidth + "px<br>";
text += "Szerokość z wewnętrznymi marginesami, ramkami i paskami przewijania: " + elmnt.offsetWidth + "px";

Spróbuj sam

Gramatyka

element.offsetWidth

Zwracana wartość

Typ Opis
Numer Widoczna szerokość elementu (w pikselach), w tym wewnętrzne marginesy, ramki i paski przewijania.

Wspierane przeglądarki

Wszystkie przeglądarki wspierają to element.offsetWidth:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie