عرض HTML DOM + ارتفاع النافذة المرئية

https://stackoverflow.com/questions/1823691

22-07-2019
|

سؤال

كيف يمكنني الحصول على الارتفاع والعرض الحاليين للمساحة المتوفرة في المتصفح وهو مفتوح.

لا أريد ارتفاع إجمالي المستند، بل ما هو مرئي على الشاشة فقط.

المحلول

يمكنك إلقاء نظرة على هذا مشاركة مدونة لرؤية الطريقة.

وباختصار إعطاء هذا الرمز

function alertSize() {
    var myWidth = 0, myHeight = 0;
    if(typeof(window.innerWidth) == 'number') {
        // Non-IE
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
    } 
    else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
        // IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
    } 
    else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
        // IE 4 compatible
        myWidth = document.body.clientWidth;
        myHeight = document.body.clientHeight;
    }

    window.alert( 'Width = ' + myWidth );
    window.alert( 'Height = ' + myHeight );
}

يجب أيضًا ملاحظة أن معظم إطار عمل js (jquery، ext، النموذج الأولي) سيوفر وظيفة للقيام بذلك (IMHO).

في مسج:

$(window).width();
$(window).height();

نصائح أخرى

استخدم نافذة الكائنات الملكية، الداخلي الطول / العرض، للعثور على أبعاد فقط المحتوى على صفحة ويب. وهذا يشمل أشرطة التمرير. هنا هو تفسير البصري -> http://goo.gl/L0cBLA

والطول:

window.innerHeight

والعرض:

window.innerWidth

<html id="THE_HTML">
<!-- all your stuff... -->
</html>

وبعد ذلك:

document.getElementById('THE_HTML').clientHeight;

واختبارها وتعمل تحت IE8 وFF3.6 ...

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow