JS,jQuery获取各种屏幕的宽度和高度

2018年06月11日

阅读:614

做Web端开发时会经常用到获取当前对象位置的方法,下面是在网上找的一些相关资料,在这里共享一下。

jQuery代码:

// 浏览器当前窗口可视区域高度
alert($(window).height()); 

// 浏览器当前窗口文档的高度
alert($(document).height()); 

// 浏览器当前窗口文档body的高度
alert($(document.body).height()); 

// 浏览器当前窗口文档body的总高度,包括border padding margin
alert($(document.body).outerHeight(true)); 

// 浏览器当前窗口可视区域宽度
alert($(window).width()); 

// 浏览器当前窗口文档对象宽度
alert($(document).width()); 

// 浏览器当前窗口文档body的高度
alert($(document.body).width()); 

// 浏览器当前窗口文档body的总宽度 包括border padding margin
alert($(document.body).outerWidth(true));

Javascript代码:

// 网页可见区域宽
document.body.clientWidth

// 网页可见区域高
document.body.clientHeight

// 网页可见区域宽
document.body.offsetWidth  // (包括边线的宽)

// 网页可见区域高
document.body.offsetHeight  // (包括边线的高)

// 网页正文全文宽
document.body.scrollWidth

// 网页正文全文高
document.body.scrollHeight

// 网页被卷去的高
document.body.scrollTop

// 网页被卷去的左
document.body.scrollLeft

// 网页正文部分上
window.screenTop

// 网页正文部分左
window.screenLeft

// 屏幕分辨率的高
window.screen.height

// 屏幕分辨率的宽
window.screen.width

// 屏幕可用工作区高度
window.screen.availHeight

// 屏幕可用工作区宽度
window.screen.availWidth

JS位置函数:

1.offset()
获取匹配元素在当前视口的相对偏移。返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。

2.innerWidth()
获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。此方法对可见和隐藏元素均有效。返回值:整型数据

3.innerHeight()
获取第一个匹配元素内部区域高度(包括补白、不包括边框)。此方法对可见和隐藏元素均有效。返回值:整型数据

4.outerWidth()
获取第一个匹配元素外部宽度(默认包括补白和边框)。此方法对可见和隐藏元素均有效。返回值:整型数据

5.outerHeight()
获取第一个匹配元素外部高度(默认包括补白和边框)。此方法对可见和隐藏元素均有效。返回值:整型数据

6.scrollTop()
获取匹配元素相对滚动条顶部的偏移。

7.scrollLeft()
获取匹配元素相对滚动条左侧的偏移

JS案例实例:

// 获取页面的高度、宽度
function getPageSize() {
    var xScroll, yScroll;
    if (window.innerHeight && window.scrollMaxY) {
        xScroll = window.innerWidth + window.scrollMaxX;
        yScroll = window.innerHeight + window.scrollMaxY;
    } else {
        if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac    
            xScroll = document.body.scrollWidth;
            yScroll = document.body.scrollHeight;
        } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari    
            xScroll = document.body.offsetWidth;
            yScroll = document.body.offsetHeight;
        }
    }
    var windowWidth, windowHeight;
    if (self.innerHeight) { // all except Explorer    
        if (document.documentElement.clientWidth) {
            windowWidth = document.documentElement.clientWidth;
        } else {
            windowWidth = self.innerWidth;
        }
        windowHeight = self.innerHeight;
    } else {
        if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode    
            windowWidth = document.documentElement.clientWidth;
            windowHeight = document.documentElement.clientHeight;
        } else {
            if (document.body) { // other Explorers    
                windowWidth = document.body.clientWidth;
                windowHeight = document.body.clientHeight;
            }
        }
    }       
    // for small pages with total height less then height of the viewport    
    if (yScroll < windowHeight) {
        pageHeight = windowHeight;
    } else {
        pageHeight = yScroll;
    }    
    // for small pages with total width less then width of the viewport    
    if (xScroll < windowWidth) {
        pageWidth = xScroll;
    } else {
        pageWidth = windowWidth;
    }
    arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);
    return arrayPageSize;
}
 
// 滚动条
document.body.scrollTop;
$(document).scrollTop();

上一篇:没有了

下一篇:explode与implode字符串数组互换函数

别逗了好么

努力每一天,奋斗为明天。

文章 981 作品 25,341

热门作品

文章推荐

猜你喜欢

榜上有名

广告