Jquery का उपयोग किए बिना दस्तावेज़ ऊंचाई और चौड़ाई कैसे प्राप्त करें

112

शुद्ध में दस्तावेज़ की ऊंचाई और चौड़ाई कैसे प्राप्त करें जावास्क्रिप्ट बिना उपयोग के jQuery।
मैं जानता हूं $(document).height()और इसके बारे में $(document).width(), लेकिन मैं ऐसा करना चाहता हूंजावास्क्रिप्ट।

मेरा मतलब था पृष्ठ की ऊँचाई और चौड़ाई।

javascript

— सरिता
स्रोत

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

— क्लेमेन तुषार

119

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

जाँच करें: बेहतर स्पष्टीकरण के लिए यह लेख ।

— Damb
स्रोत

9

यह क्रॉस ब्राउज़र नहीं है। इसे पोस्ट करने से पहले आपको इसका परीक्षण करना चाहिए था।

12

@ इज़ारू ने इशारा किया कि धन्यवाद। ऐसा लगता है कि 4 साल पुराना जवाब बुलेटप्रूफ नहीं है :)

— Damb

2

ऐसा लगता है कि यह क्रॉस-ब्राउज़र है ।

— मचिट्ठार्ग

यदि किसी वेबसाइट की सीमा है, तो वह इस समाधान के साथ चौड़ाई से दूर ले जाती है, लेकिन jQuery समाधान नहीं। बदन पर बॉर्डर होना गैरकानूनी है लेकिन जानने लायक है। window.innerWidthइसे हल करता है

— BritishSam

यह ब्राउज़र विंडो की ऊंचाई देता है (यदि आप इसे बदलने वाले ब्राउज़र की ऊंचाई को समायोजित करते हैं), न कि सामग्री / वेबपेज की ऊंचाई।

— रेडिमेशन

56

यहां तक कि http://www.howtocreate.co.uk/tutorials/javascript/browserwindow पर दिया गया अंतिम उदाहरण क्वर्क मोड पर काम नहीं कर रहा है। जितना मैंने सोचा था कि इसे खोजने में आसान है, यह समाधान प्रतीत होता है (नवीनतम jquery कोड से निकाला गया):

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

ऊंचाई पाने के लिए बस "ऊँचाई" के लिए चौड़ाई बदलें।

— सज्जन
स्रोत

1

यह सही उत्तर होना चाहिए। ClientWidth का हमेशा सही मान नहीं होता है।

— वाइल्डहैमर

ग्राहक के साथ समस्या यह केवल देखने योग्य है। स्क्रॉलविद में स्क्रीन से लीक होने वाली चीजें शामिल हैं। कम से कम, यह 2019 में मेरे क्रोम प्रयोगों के लिए सच है।

— स्टेकोल

@StayCool ऐसा लगता है कि सबसे हालिया jQuery अभी भी दस्तावेज़ ऊंचाई / चौड़ाई की गणना के लिए इस पद्धति का उपयोग कर रहा है और यह उसी के रूप में परिणाम देता है $(document).width()। हो सकता है कि आप ऐसा कुछ कर रहे हों, $(window).width()जो शुद्ध जेएस में सिर्फ document.documentElement["clientWidth"]आधुनिक ब्राउज़रों पर होगा ।

— डैन

38

यह एक क्रॉस-ब्राउज़र समाधान है:

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

— हामिद
स्रोत

यह करने के लिए एक सुरक्षित और सटीक चीज है

— नान झोउ

1

यह विंडो की ऊँचाई और चौड़ाई लौटा रहा है, न कि दस्तावेज़ की ऊँचाई और चौड़ाई

— माइकल

25

आपको इसका उपयोग करना चाहिए getBoundingClientRectक्योंकि यह आमतौर पर क्रॉस ब्राउज़र काम करता है और आपको सीमा आयत पर उप-पिक्सेल सटीक देता है ।

elem.getBoundingClientRect()

— एरिक Aigner
स्रोत

1

समर्थन के बारे में सोच रहे लोगों के लिए: caniuse.com/#feat=getboundingclientrect

— माइक

यह 0 की ऊँचाई देता है जब मैंने इसे डॉक्यूमेंट पर प्रयोग किया था। कोई

— माइकल

शायद इसलिए कि आपके शरीर की ऊँचाई 0. है। यदि आप इसके डिस्प्ले प्रकार को नहीं बदलते हैं तो यह डिफ़ॉल्ट रूप से होता है। इसे DOM इंस्पेक्टर में देखें।

— एरिक एग्नर

11

JQuery के बिना दस्तावेज़ आकार प्राप्त करें

document.documentElement.clientWidth
document.documentElement.clientHeight

और अगर आपको स्क्रीन साइज चाहिए तो इसका इस्तेमाल करें

screen.width
screen.height

— tamasviktor
स्रोत

8

आप भी आजमा सकते हैं:

document.body.offsetHeight
document.body.offsetWidth

— मिहाई फ्रेंतीउ
स्रोत

1

खिड़की के आकार की घटनाओं जैसी चीजों में इनका उपयोग करने से सावधान रहें। उन्हें ऊंचाई और चौड़ाई की गणना करनी होती है, जिसमें कुछ समय लगता है।

— मीलों

8

यह सभी ब्राउज़रों / उपकरणों के लिए काम करना चाहिए:

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

    return actualWidth;
}

— user937284
स्रोत

window.innerWidth केवल एक ही सही है जब देव उपकरण क्रोम पर खुले हैं

— एलेक्स

4

यदि आप पृष्ठ की पूरी चौड़ाई प्राप्त करना चाहते हैं, जिसमें अतिप्रवाह, उपयोग शामिल है document.body.scrollWidth।

— अरलेन बीलर
स्रोत

क्या यह समाधान क्रॉस ब्राउज़र है?

— कॉलबैक

1

बहुत आसानी से दस्तावेज़ की चौड़ाई और ऊंचाई कैसे पता करें?

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

जावास्क्रिप्ट में

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

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

जरूरत पड़ने पर आप प्रत्येक विंडो आकार परिवर्तन कार्यक्रम में इसे अपडेट कर सकते हैं।

— जोशी फ्रांसिस
स्रोत

0

windowपूरे ब्राउज़र की एप्लिकेशन विंडो है। documentवह वेबपृष्ठ दिखाया गया है जो वास्तव में लोड किया गया है।

window.innerWidthऔर window.innerHeightस्क्रॉलबार्स को ध्यान में रखेंगे जो कि आप जो चाहते हैं वह नहीं हो सकता है।

document.documentElementशीर्ष स्क्रॉलबार के बिना पूरा वेबपृष्ठ है। document.documentElement.clientWidthy स्क्रॉलबार के बिना दस्तावेज़ की चौड़ाई का आकार देता है। document.documentElement.clientHeightएक्स स्क्रॉलबार के बिना दस्तावेज़ ऊंचाई का आकार देता है।

— user3798451
स्रोत