如何用 js 取得浏览器的高度并赋值给div？

JavaScript07

如何用 js 取得浏览器的高度并赋值给div？,第1张

js取得浏览器的高度并赋值给div的步骤如下：

1."http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><title>

2.请调整浏览器窗口大小</h2><hr /><form action="#" method="get" name="form1" id="form1"><!--

3.显示浏览器窗口的实际尺寸-->浏览器窗口 的 实际高    度: <input type="text" name="availHeight" size="4"/><br />

4.浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"/><br /></form><script type="text/javascript"><!-- var winWidth = 0var winHeight = 0function findDimensions()

5.//函数：获取尺寸{//获取窗口宽度if (window.innerWidth)winWidth = window.innerWidthelse if ((document.body) && (document.body.clientWidth))winWidth = document.body.clientWidth//获取窗口高度document.form1.availHeight.value= winHeightdocument.form1.availWidth.value= winWidth}findDimensions()//调用函数，获取数值window.onresize=findDimensions//--></script></body></html>

function AdjustColumnsHeight() {

    var mainCol = window.document.getElementById('MainColumn')

    var leftCol = window.document.getElementById('MainLeft')

    var rightCol = window.document.getElementById('MainRight')

    var hMainCol =  mainCol .offsetHeight

    var hLeftCol = leftCol.offsetHeight

    var hRightCol = rightCol.offsetHeight

    var maxHeight = Math.max( hMainCol , Math.max(hLeftCol, hRightCol))

    mainCol.style.height = maxHeight + 'px'

    leftCol.style.height = maxHeight + 'px'

    rightCol.style.height = maxHeight + 'px'

}

上面的代码是取得3个div的高度，并判断高度最高的div高度值，让其余两个比较矮的div高度等于最高这个，自己琢磨下，很简单。

function AdjustColumnsHeight() {    var mainCol = window.document.getElementById('MainColumn')    var leftCol = window.document.getElementById('MainLeft')    var rightCol = window.document.getElementById('MainRight')     var hMainCol =  mainCol .offsetHeight    var hLeftCol = leftCol.offsetHeight    var hRightCol = rightCol.offsetHeight     var maxHeight = Math.max( hMainCol , Math.max(hLeftCol, hRightCol))    mainCol.style.height = maxHeight + 'px'    leftCol.style.height = maxHeight + 'px'    rightCol.style.height = maxHeight + 'px'}

jQuery获取一个div的高度步骤：

第一步, 获取你要得到高度的那个div的jQuery对象, 获得方法有很多很多种, 具体你可以看一下jQuery API文档里的选择器部分, 在这里我只跟你说一个最直接的方法, 通过id获得: $("#div_id")

第二步, 要看你要得到的是什么高度了, jQuery里现有的三个(其实是两个)获得高度的方法是:

1. $("#div_id").height()// 获得的是该div本身的高度, (不包含padding,margin,border)

2. $("#div_id").outerHeight()// 包含该div本身的高度, padding上下的高度, 以及border上下的高度(不包含margin的高度)

3. $("#div_id").outerHeight(true)// 包含该div本身的高度, 以及padding,border,margin上下的总高度。