容器高度或者宽度的获取方式
为了使表格或者一些数据能能够自适应浏览器的宽度或者高度,就不可避免的要获取浏览器的尺寸电脑屏幕尺寸的获取方式window.screen.height //获取电脑屏幕分辨率的高度window.screen.width //获取电脑屏幕分辨率的宽度window.screen.availHeight // 获取电脑屏幕的有效高度(例如 出去任务栏,有顶部栏的也会除去)window.scre
·
为了使表格或者一些数据能能够自适应浏览器的宽度或者高度,就不可避免的要获取浏览器的尺寸
电脑屏幕尺寸的获取方式
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;//返回当前容器高度数据
}
宽度的获取和高度差不多 使用 clientWidth即可;
参考资料:
document.body.clientHeight 和 document.documentElement.clientHeight 的区别
更多推荐
已为社区贡献1条内容
所有评论(0)