容器高度或者宽度的获取方式

最新推荐文章于 2023-03-09 17:59:33 发布

肖扬、

最新推荐文章于 2023-03-09 17:59:33 发布

阅读量3.7k

点赞数

文章标签：浏览器高度浏览器宽度 html css js

本文链接：https://blog.csdn.net/MxiaXxy/article/details/78050581

版权

为了使表格或者一些数据能能够自适应浏览器的宽度或者高度，就不可避免的要获取浏览器的尺寸

电脑屏幕尺寸的获取方式

window.screen.height //获取电脑屏幕分辨率的高度
window.screen.width //获取电脑屏幕分辨率的宽度


window.screen.availHeight // 获取电脑屏幕的有效高度（例如 出去任务栏，有顶部栏的也会除去）
window.screen.availWidth //获取电脑屏幕的有效宽度

获取电脑屏幕的宽度或者高度是不用去考虑兼容模式的问题
那必然获取浏览器的尺寸就一定要注意兼容模式的问题

浏览器中尺寸（高度、宽度、滚动条高度）的获取方式

document.body.clientHeight //获取浏览器的body对象的高度
document.body.clientWidth //获取浏览器的body对象的宽度


document.documentElement.clientHeight // 获取浏览器的可见高度
document.documentElement.clientHeight //获取浏览器的可见宽度

由于历史原因，浏览器对页面的渲染会存在两种模式：

1 标准模式旧的渲染方法（ie）

2 兼容模式 W3C标准规范
两种模式由于计算方式不同获取同一个容器的高度和宽度会根据 margin border padding 有一定区别

这个标签如果设置了就是兼容模式会按照w3c的标准去解析html页面但是如果没有设置会按照 backCompat 也就是标准模式又称怪异模式（不同的浏览器会按照自己的解析方式去解析）这种就会在不同的浏览器中出现不可知的问题！

一般获取尺寸是要考虑兼容：

//获取浏览器的高度
function getClientHeight(domId){
    //domId 为当前容器的id
    var roolEl;//设置一个临时变量
    if(domId = null){
    //document.compatMode用来获取当前浏览器的模式
    //CSS1Compat 为兼容模式 W3c指定 
        roolEl = document.compatMode == "CSS1Compat" ? document.documentElement : document.body;
    }else{
        roolEl = document.ElementById(domId);//获取指定容器的对象
    }
    var rootHd = parentInt(roolEl.clientHeight);//获取当前容器的高度
    return rootHd;//返回当前容器高度数据



}