获取页面及元素的宽高

console.log('屏幕(显示器)宽度：' + window.screen.width + 'px');
console.log('屏幕(显示器)高度：' + window.screen.height + 'px');

console.log('浏览器窗口宽度(含滚动条宽度)：' + window.innerWidth + 'px');
console.log('浏览器窗口高度(含滚动条宽度)：' + window.innerHeight + 'px');

console.log('浏览器窗口宽度(不含滚动条宽度)：' + document.documentElement.clientWidth + 'px' + ' ⇔ ' + $(window).width() + 'px');
console.log('浏览器窗口高度(不含滚动条宽度)：' + document.documentElement.clientHeight + 'px' + ' ⇔ ' + $(window).height() + 'px');

console.log('页面宽度(不含滚动条宽度)：' + document.documentElement.scrollWidth + 'px' + ' ⇔ ' + $(document).width() + 'px');
console.log('页面高度(不含滚动条宽度)：' + document.documentElement.scrollHeight + 'px' + ' ⇔ ' + $(document).height() + 'px');

console.log('横向滚动条：' + (document.documentElement.scrollWidth - document.documentElement.clientWidth ? '有' : '无'));
console.log('竖向滚动条：' + (document.documentElement.scrollHeight - document.documentElement.clientHeight ? '有' : '无'));
console.log('滚动条宽度：' + (window.innerWidth - document.documentElement.clientWidth));

console.log('距离顶部滚动距离：' + document.documentElement.scrollTop + 'px' + ' ⇔ ' + $(document).scrollTop() + 'px');
console.log('距离左边滚动距离：' + document.documentElement.scrollLeft + 'px' + ' ⇔ ' + $(document).scrollLeft() + 'px');

console.log('元素id="demo-1"的宽度(含padding)：' + document.getElementById('demo-1').offsetWidth + 'px' + ' ⇔ ' + $('#demo-1').innerWidth() + 'px');
console.log('元素id="demo-1"的高度(含padding)：' + document.getElementById('demo-1').offsetHeight + 'px' + ' ⇔ ' + $('#demo-1').innerHeight() + 'px');