Jak uzyskać wysokość i szerokość dokumentu bez używania jQuery

112

Jak uzyskać wysokość i szerokość dokumentu w pliku pure javascript tj. bez użycia jquery.
Wiem o $(document).height()i $(document).width(), ale chcę to zrobić wjavascript.

Miałem na myśli wysokość i szerokość strony.

javascript

— Saritha
źródło

james.padolsey.com/javascript/get-document-height-cross-browser

— Klemen Tušar

119

var height = document.body.clientHeight;
var width = document.body.clientWidth;

Sprawdź: ten artykuł zawiera lepsze wyjaśnienie.

— Damb
źródło

9

To nie jest cross browser. Powinieneś to przetestować przed wysłaniem.

12

@Iwazaru Dzięki za wskazanie tego. Wygląda na to, że ta 4-letnia odpowiedź nie jest kuloodporna :)

— Damb

2

Wygląda na to, że działa w różnych przeglądarkach .

— MAChitgarha

Jeśli strona internetowa ma obramowanie, zmniejsza to szerokość w tym rozwiązaniu, ale nie w rozwiązaniu jQuery. Mało prawdopodobne, aby stanowiła granicę na ciele, ale warto wiedzieć. window.innerWidthrozwiązuje ten problem

— BritishSam

Zwraca wysokość okna przeglądarki (jeśli dostosujesz wysokość przeglądarki, którą zmienia), a nie wysokość treści / strony internetowej.

— Radmation

56

Nawet ostatni przykład podany na http://www.howtocreate.co.uk/tutorials/javascript/browserwindow nie działa w trybie Osobliwości. Łatwiej znaleźć niż myślałem, wydaje się, że jest to rozwiązanie (wyodrębnione z najnowszego kodu jQuery):

Math.max(
    document.documentElement["clientWidth"],
    document.body["scrollWidth"],
    document.documentElement["scrollWidth"],
    document.body["offsetWidth"],
    document.documentElement["offsetWidth"]
);

po prostu zamień Szerokość na „Wysokość”, aby uzyskać Wysokość.

— Dan
źródło

1

To powinna być prawidłowa odpowiedź. clientWidth nie zawsze ma właściwą wartość.

— Wildhammer

problem z clientWidth polega na tym, że jest on widoczny tylko. scrollWidth obejmuje rzeczy wyciekające z ekranu. przynajmniej tak jest w przypadku moich eksperymentów z Chrome w 2019 roku.

— StayCool

@StayCool wygląda na to, że najnowszy jQuery nadal używa tej metody do obliczania wysokości / szerokości dokumentu i daje taki sam wynik jak $(document).width(). Może szukasz czegoś takiego, $(window).width()co w czystym JS byłoby tylko document.documentElement["clientWidth"]w nowoczesnych przeglądarkach.

— Dan

38

To jest rozwiązanie dla różnych przeglądarek:

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

— hamid
źródło

To bezpieczna i dokładna rzecz

— Nan Zhou

1

zwraca to wysokość i szerokość okna, a nie wysokość i szerokość dokumentu

— Michael

25

Powinieneś używać, getBoundingClientRectponieważ zwykle działa w różnych przeglądarkach i zapewnia sub-pikselową precyzję w prostokącie granic.

elem.getBoundingClientRect()

— Erik Aigner
źródło

1

dla tych, którzy zastanawiają się nad wsparciem: caniuse.com/#feat=getboundingclientrect

— Mike Gleason jr Couturier

zwraca to wysokość 0, gdy użyłem go na document.body

— Michael

Prawdopodobnie dlatego, że twoje ciało ma wysokość 0. Jeśli nie zmienisz typu wyświetlania, tak jest domyślnie. Sprawdź to w inspektorze DOM.

— Erik Aigner

11

Uzyskaj rozmiar dokumentu bez jQuery

document.documentElement.clientWidth
document.documentElement.clientHeight

I użyj tego, jeśli potrzebujesz rozmiaru ekranu

screen.width
screen.height

— tamasviktor
źródło

8

Możesz także spróbować:

document.body.offsetHeight
document.body.offsetWidth

— Mihai Frentiu
źródło

1

Uważaj, aby używać ich w takich sytuacjach, jak zdarzenia zmiany rozmiaru okna. muszą obliczyć wysokość i szerokość, co zajmuje trochę czasu.

— Miles

8

To powinno działać dla wszystkich przeglądarek / urządzeń:

function getActualWidth()
{
    var actualWidth = window.innerWidth ||
                      document.documentElement.clientWidth ||
                      document.body.clientWidth ||
                      document.body.offsetWidth;

    return actualWidth;
}

— user937284
źródło

window.innerWidth jest jedynym, który jest również poprawny, gdy narzędzia programistyczne są otwarte w przeglądarce Chrome

— Alex,

4

Jeśli chcesz uzyskać pełną szerokość strony, w tym przepełnienie, użyj document.body.scrollWidth.

— Arlen Beiler
źródło

Czy to rozwiązanie działa w różnych przeglądarkach?

— oddzwonienie

1

Jak bardzo łatwo sprawdzić szerokość i wysokość dokumentu?

w HTML
<span id="hidden_placer" style="position:absolute;right:0;bottom:0;visibility:hidden;"></span>

w javascript

     var c=document.querySelector('#hidden_placer');

     var r=c.getBoundingClientRect();
     r.right=document width
     r.bottom=document height`

W razie potrzeby możesz to zaktualizować przy każdym zdarzeniu zmiany rozmiaru okna.

— Joshy Francis
źródło

0

windowto całe okno aplikacji przeglądarki. documentto faktycznie załadowana strona internetowa.

window.innerWidthi window.innerHeightweźmie pod uwagę paski przewijania, które mogą nie być tym, czego chcesz.

document.documentElement to cała strona internetowa bez górnego paska przewijania. document.documentElement.clientWidthzwraca szerokość dokumentu bez paska przewijania y. document.documentElement.clientHeightzwraca rozmiar wysokości dokumentu bez x paska przewijania.

— user3798451
źródło