导航:首页 > 编程语言 > js获取body高度兼容ie

js获取body高度兼容ie

发布时间:2023-06-11 15:33:36

js 如何获得浏览器的高度

要在js中获得浏览器的高度可以参考以下步骤(具体代码见最后):
1、outerHeight属性设置或返回一个窗口的外部高度,包括所有界面元素(如工具栏/滚动条)。
2、outerWidth属性设置或返回窗口的外部宽度,包括所有的界面元素(如工具栏/滚动)。
3、innerheight 返回窗口的文档显示区的高度。
4、innerwidth 返回窗口的文档显示区的宽度。
补充:
在浏览器兼容方面:
1、所有主流浏览器都支持 outerWidth 和 outerHeight 属性。
注意:IE 8 及更早 IE 版本不支持该属性。
2、所有主流浏览器都支持 innerWidth 和 innerHeight 属性。
注意:IE 8 及更早 IE版本不支持这两个属性。

获取代码:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<head>
<title>请调整浏览器窗口</title> <meta http-equiv="content-type" content="text/html; charset=gb2312">
</meta></head>
<body>
<h2 align="center">请调整浏览器窗口大小</h2><hr />
<form action="#" method="get" name="form1" id="form1">
<!--显示浏览器窗口的实际尺寸-->
浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"/><br />
浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"/><br />
</form>
<script type="text/javascript">
<!--
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函数:获取尺寸
{
//获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测,获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//结果输出至两个文本框
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
//调用函数,获取数值
window.onresize=findDimensions;
//-->
</script>
</body>
</html>

㈡ js获取浏览器高度+上下滚动条的高度,也就是整个网页的高度,需求,要求兼容ie6,7,火狐等主流浏览器

您好!很高兴为您答疑!

给您提供一个代码,根据需要稍做修改就可以了,兼容各浏览器:
function getViewSizeWithoutScrollbar(){//不包含滚动条
return {
width : document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
function getViewSizeWithScrollbar(){//包含滚动条
if(window.innerWidth){
return {
width : window.innerWidth,
height: window.innerHeight
}
}else if(document.documentElement.offsetWidth == document.documentElement.clientWidth){
return {
width : document.documentElement.offsetWidth,
height: document.documentElement.offsetHeight
}
}else{
return {
width : document.documentElement.clientWidth + getScrollWith(),
height: document.documentElement.clientHeight + getScrollWith()
}
}
}
您可以在火狐社区了解更多内容。希望我的回答对您有所帮助,如有疑问,欢迎继续在本平台咨询。

㈢ 在IE中JS 如何获取滚动条的高度

var x=document.body.scrollTop;
alert(x);

㈣ 如何用JS动态获取浏览器的宽高

IE中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度


FireFox中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度


Opera中:
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

没有定义W3C的标准,则
IE为:
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0

FireFox为:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

Opera为:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)


网页可见区域宽: 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

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量


示例:

varwinWidth=0;
varwinHeight=0;
functionfindDimensions()//函数:获取尺寸
{
//获取窗口宽度
if(window.innerWidth)
winWidth=window.innerWidth;
elseif((document.body)&&(document.body.clientWidth))
winWidth=document.body.clientWidth;
//获取窗口高度
if(window.innerHeight)
winHeight=window.innerHeight;
elseif((document.body)&&(document.body.clientHeight))
winHeight=document.body.clientHeight;
//通过深入Document内部对body进行检测,获取窗口大小
if(document.documentElement&&document.documentElement.clientHeight&&document.documentElement.clientWidth)
{
winHeight=document.documentElement.clientHeight;
winWidth=document.documentElement.clientWidth;
}
//结果输出至两个文本框
document.form1.availHeight.value=winHeight;
document.form1.availWidth.value=winWidth;
}
findDimensions();
//调用函数,获取数值
window.onresize=findDimensions;

㈤ 我通过JS改变DIV高度,但是在IE7下有问题

盒子模型是CSS中一个重要的概念,理解了盒子模型才能更好的排版。其实盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型。


盒子模型是CSS中一个重要的概念,理解了盒子模型才能更好的排版。其实盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释各不相同,先来看看我们熟悉的标准盒子模型:

从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading。
例:一个盒子的 margin 为 20px,border 为 1px,padding 为 10px,content 的宽为
200px、高为 50px,如果用标准 W3C 盒子模型解释,那么这个盒子需要占据的位置为:宽 20*2 1*2 10*2
200=262px、高 20*2 1*2*10*2 50=112px,盒子的实际大小为:宽 1*2 10*2 200=222px、高 1*2
10*2 50=72px;如果用IE 盒子模型,那么这个盒子需要占据的位置为:宽 20*2 200=240px、高 20*2
50=70px,盒子的实际大小为:宽 200px、高 50px。
那应该选择哪中盒子模型呢?当然是“标准 W3C 盒子模型”了。怎么样才算是选择了“标准 W3C
盒子模型”呢?很简单,就是在网页的顶部加上 DOCTYPE 声明。如果不加 DOCTYPE 声明,那么各个浏览器会根据自己的行为去理解网页,即
IE 浏览器会采用 IE 盒子模型去解释你的盒子,而 FF 会采用标准 W3C
盒子模型解释你的盒子,所以网页在不同的浏览器中就显示的不一样了。反之,如果加上了 DOCTYPE 声明,那么所有浏览器都会采用标准 W3C
盒子模型去解释你的盒子,网页就能在各个浏览器中显示一致了。
再用 jQuery 做的例子来证实一下。
代码1:

<html>
<head>
<title>你用的盒子模型是?</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sBox = $.boxModel ? "标准W3C":"IE";
document.write("您的页面目前支持:" sBox "盒子模型");
</script>
</head>
<body>
</body>
</html>
上面的代码没有加上 DOCTYPE 声明,在 IE 浏览器中显示“IE盒子模型”,在 FF 浏览器中显示“标准 W3C 盒子模型”。
代码2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>你用的盒子模型是标准W3C盒子模型</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sBox = $.boxModel ? "标准W3C":"IE";
document.write("您的页面目前支持:" sBox "盒子模型");
</script>
</head>
<body>
</body>
</html>
代码2 与代码1 唯一的不同的就是顶部加了 DOCTYPE 声明。在所有浏览器中都显示“标准 W3C 盒子模型”。
所以为了让网页能兼容各个浏览器,让我们用标准 W3C 盒子模型。




㈥ jquery js获取移动设备浏览器高度

在js使用过程中可能会根据要求获取浏览器高度和宽度。
一、获取浏览器的高度版:
jquery代码直接使用 $(window).height();
原生态权JS代码需要考虑页面DOCTYPE的声明,使用以下代码:
<script>
var w=document.documentElement?document.documentElement.clientHeight:document.body.clientHeight;
alert(w);
</script>
二、获取浏览器的宽度:
jquery代码直接使用 $(window).With();
原生态JS代码:
var w=document.documentElement?document.documentElement.clientWidth:document.body.clientWidth;

㈦ IE浏览器下如何用js获取单元格高度(未设置高度,默认高度)

#id.offsetHeight

㈧ 【急】高分求完整的js获取浏览器个要素高度宽度值的方法!!!!

在IE下:
获取浏览器可见区域宽度:width = document.documentElement.clientWidth;
获取浏览器可见区域高度:height = document.documentElement.clientHeight;
Body对象宽度:width = document.body.clientWidth;
Body对象高度:height = document.body.clientHeight;
firefox和IE一样...

在Opera下:
获取浏览器可见区域宽度:width = document.body.clientWidth;
获取浏览器可见区域高度:height = document.body.clientHeight;
Body对象宽度:width = document.documentElement.clientWidth;
Body对象高度:height = document.documentElement.clientHeight;

在没有定义W3C标准下...
三种浏览器均为:
获取浏览器可见区域宽度:width = document.documentElement.clientWidth;
获取浏览器可见区域高度:height = document.documentElement.clientHeight;

阅读全文

与js获取body高度兼容ie相关的资料

热点内容
app充值请联系itunes 浏览:678
矢量app和cdr哪个好 浏览:85
系统文件坏了如何修复 浏览:20
键盘系统文件误删 浏览:738
白金英雄坛所有版本 浏览:842
ps文件转hsj 浏览:382
哪个网站电影 浏览:490
ps4游戏文件格式名称 浏览:290
caxa教程2007 浏览:832
新点是什么小说网站 浏览:753
魔兽世界冰封王座3版本转换器 浏览:418
苹果3dtouch软件 浏览:979
qq视频在哪个文件夹里面 浏览:740
请帖制作网站java源码 浏览:257
自己的网站怎么做兼职 浏览:608
医院基础数据是什么 浏览:744
为什么数据线没有typec接口 浏览:39
苹果手机文件管家 浏览:187
qq头像男生水里 浏览:633
联想电脑初始密码 浏览:517

友情链接