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

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

电脑屏幕尺寸的获取方式

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 为当前容器的idvar 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 的区别

依水间的博客：document.compatMode介绍

【DOCTYPE】兼容模式和标准模式

doctype的作用

容器高度或者宽度的获取方式相关推荐

html高度随宽度编号,纯css实现容器高度随宽度等比例变化的四种解决方案
使用一个隐藏的图片来实现这个方法是我最推荐的,因为不需要考虑任何兼容性,PC移动完美运行.除了增加了一个dom结构,但是相对与一个页面成百上千的代码来说,不值一提我们知道,div容器如果不给定高度 ...
css 设置容器高度等于宽度，设置容器的宽高一致。
当容器的内边距设置100%时,取得是容器的宽度单位. height:0;padding-bottom:100%; height:0;padding:50% 0;
在html上js添加宽度,js 获取div高度并重新设置div高度与宽度
js 获取div高度并重新设置div高度与宽度 js 获取div高度并重新设置div高度与宽度 var $=function(id) { return document.getElementById( ...
java中如何设置浏览器宽度_[Java教程]关于JS中获取浏览器高度和宽度值的多种方法(多浏览器)_星空网...
关于JS中获取浏览器高度和宽度值的多种方法(多浏览器) 2017-08-07 0 三种浏览器获取值方法 IE中: document.body.clientWidth ==> BODY对象宽度 d ...
js 获取浏览器高度和宽度值
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...
vue如何获取div的宽度_vue获取dom元素高度的方法
获取DOM高度: 要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作(参照生命周期钩子mounted语法:https://cn.vuejs.org/v2/api/#mo ...
获取svg元素的高度和宽度（或其他属性）
下面给出了基于svg元素的js对象获取属性的方法(jqury对象可以转成js对象获取,主要关注点是svg同时支持以attribute的方式和style的方式来定义高度和宽度,但两种定义方式获取属性的方 ...
js 如何获取浏览器的高度和宽度
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...
不同浏览器JS获取浏览器高度和宽度
摘自:http://blog.csdn.net/lai_gb/archive/2009/07/04/4320956.aspx IE中: document.body.clientWidth ==> ...

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

容器高度或者宽度的获取方式相关推荐

最新文章

热门文章