Cara mendapatkan tinggi dan lebar dokumen tanpa menggunakan jquery

112

Bagaimana mendapatkan tinggi dan lebar dokumen secara murni javascript yaitu tanpa menggunakan jquery.
Saya tahu tentang $(document).height()dan $(document).width(), tetapi saya ingin melakukannya dijavascript.

Yang saya maksud adalah tinggi dan lebar halaman.

javascript

— Saritha
sumber

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

— Klemen Tušar

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