Як отримати висоту та ширину документа без використання jquery

Як отримати висоту та ширину документа в чистоті javascript тобто без використання jquery.
Я знаю про $(document).height()і $(document).width(), але хочу це зробити вjavascript.

Я мав на увазі висоту та ширину сторінки.

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

Перевірте: ця стаття для кращого пояснення.

Навіть останній приклад, наведений у http://www.howtocreate.co.uk/tutorials/javascript/browserwindow , не працює в режимі Quirks. Простіше знайти, ніж я думав, це, здається, рішення (витягнуте з останнього коду jquery):

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

просто замініть Width на "Height", щоб отримати висоту.

Це крос-браузерне рішення:

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

Ви повинні використовувати, getBoundingClientRectяк це зазвичай працює крос-браузер і дає точність пікселів на прямокутнику меж.

elem.getBoundingClientRect()

Отримати розмір документа без jQuery

document.documentElement.clientWidth
document.documentElement.clientHeight

І використовуйте це, якщо вам потрібен розмір екрана

screen.width
screen.height

Ви також можете спробувати:

document.body.offsetHeight
document.body.offsetWidth

Це має працювати для всіх браузерів / пристроїв:

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

    return actualWidth;
}

Якщо ви хочете отримати повну ширину сторінки, включаючи переповнення, використовуйте document.body.scrollWidth.

Як дізнатися ширину та висоту документа дуже легко?

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

в JavaScript

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

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

Ви можете оновити це на кожній події зміни розміру вікна, якщо це необхідно.

window- це все вікно програми браузера. documentвідображається фактично завантажена веб-сторінка.

window.innerWidthі window.innerHeightврахує смуги прокрутки, що може бути не тим, що ви хочете.

document.documentElement- це повна веб-сторінка без верхньої панелі прокрутки. document.documentElement.clientWidthповертає розмір ширини документа без y прокрутки. document.documentElement.clientHeightповертає розмір висоти документа без х прокрутки.