Cara mendapatkan tinggi dan lebar dokumen tanpa menggunakan jquery

Jawaban:

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

Periksa: artikel ini untuk penjelasan yang lebih baik.

Damb
sumber
9
Ini bukan lintas browser. Anda harus menguji ini sebelum mempostingnya.
12
@Iwazaru Terima kasih telah menunjukkannya. Sepertinya balasan 4 tahun ini tidak anti peluru :)
Damb
2
Sepertinya ini lintas browser .
MAChitgarha
Jika sebuah situs web memiliki perbatasan, itu menghilangkan lebarnya dengan solusi ini tetapi bukan solusi jQuery. Tidak mungkin menjadi batas tubuh tetapi perlu diketahui. window.innerWidthmenyelesaikan ini
BritishSam
Ini mengembalikan tinggi jendela browser (jika Anda menyesuaikan tinggi browser itu berubah), bukan tinggi konten / halaman web.
Radmation
56

Bahkan contoh terakhir yang diberikan di http://www.howtocreate.co.uk/tutorials/javascript/browserwindow tidak berfungsi pada mode Quirks. Lebih mudah ditemukan daripada yang saya kira, ini tampaknya menjadi solusinya (diekstrak dari kode jquery terbaru):

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

ganti saja Lebar untuk "Tinggi" untuk mendapatkan Tinggi.

Dan
sumber
1
Ini harus menjadi jawaban yang benar. clientWidth tidak selalu memiliki nilai yang benar.
Wildhammer
Masalah dengan clientWidth adalah hanya dapat dilihat. scrollWidth menyertakan hal-hal yang bocor dari layar. setidaknya, ini berlaku untuk eksperimen Chrome saya pada tahun 2019.
StayCool
@StayCool tampaknya jQuery terbaru masih menggunakan metode ini untuk penghitungan tinggi / lebar dokumen dan memberikan hasil yang sama seperti $(document).width(). Mungkin Anda mencari sesuatu seperti $(window).width()yang dalam JS murni hanya akan ada document.documentElement["clientWidth"]di browser modern.
Dan
38

Ini adalah solusi lintas browser:

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
hamid
sumber
Ini adalah hal yang aman dan akurat untuk dilakukan
Nan Zhou
1
ini mengembalikan tinggi dan lebar jendela, bukan tinggi dan lebar dokumen
Michael
25

Anda harus menggunakan getBoundingClientRectkarena biasanya berfungsi lintas browser dan memberi Anda ketepatan sub-piksel pada persegi panjang batas.

elem.getBoundingClientRect()
Erik Aigner
sumber
1
bagi mereka yang bertanya-tanya tentang dukungan: caniuse.com/#feat=getboundingclientrect
Mike Gleason jr Couturier
ini mengembalikan ketinggian 0 ketika saya menggunakannya di document.body
Michael
Mungkin karena tubuh Anda memiliki tinggi 0. Jika Anda tidak mengubah jenis tampilan, itulah yang terjadi secara default. Periksa di inspektur DOM.
Erik Aigner
11

Dapatkan ukuran dokumen tanpa jQuery

document.documentElement.clientWidth
document.documentElement.clientHeight

Dan gunakan ini jika Anda membutuhkan ukuran Layar

screen.width
screen.height
tamasviktor.dll
sumber
8

Anda juga dapat mencoba:

document.body.offsetHeight
document.body.offsetWidth
Mihai Frentiu
sumber
1
Berhati-hatilah saat menggunakannya dalam hal-hal seperti acara pengubahan ukuran jendela. mereka harus menghitung tinggi & lebar, yang membutuhkan waktu beberapa saat.
Miles
8

Ini seharusnya berfungsi untuk semua browser / perangkat:

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

    return actualWidth;
}
pengguna937284
sumber
window.innerWidth adalah satu-satunya yang juga benar saat alat pengembang dibuka di Chrome
Alex
4

Jika Anda ingin mendapatkan lebar penuh dari halaman, termasuk overflow, gunakan document.body.scrollWidth.

Arlen Beiler
sumber
Apakah solusi ini lintas browser?
panggilan balik
1

Bagaimana cara mengetahui lebar dan tinggi dokumen dengan sangat mudah?

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

dalam javascript

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

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

Anda dapat memperbaruinya di setiap acara pengubahan ukuran jendela, jika diperlukan.

Joshy Francis
sumber
0

windowadalah jendela aplikasi seluruh browser. documentadalah laman web yang ditampilkan sebenarnya dimuat.

window.innerWidthdan window.innerHeightakan memperhitungkan scrollbar yang mungkin bukan yang Anda inginkan.

document.documentElementadalah halaman web lengkap tanpa scrollbar atas. document.documentElement.clientWidthmengembalikan ukuran lebar dokumen tanpa scrollbar y. document.documentElement.clientHeightmengembalikan ukuran tinggi dokumen tanpa x scrollbar.

pengguna3798451
sumber