
如何用js获取div不确定的自适应高度(currentStyle与offsetHeight)
亮术网 2020-05-20 本网原创
设计网页时,一些元素(如div)因显示的内容多少事先不确定,所以不能固定高度,也就是让它根据内容的多少自动调整高度,即自适应高度。
对于div元素不确定的自适应高度,如何用js获取当前高度呢?一般有两种方法,其一,通过元素的 currentStyle 获取;其二,通过元素的 offsetHeight 属性获取。第一种方法不是所有浏览器都支持,特别是低版本的浏览器;第二方法所有浏览器都通行。
一、js用currentStyle获取div的自适应高度
从 currentStyle 的字面意可以看出,是通过元素的当前CSS样式来获取div的自适应高度,虽然div的高度事先不确定,但 CSS 会根据它当前的内容来确定它的高度。具体代码如下:
<div id="content"></div>
var obj = document.getElementById("content");
var h = obj.currentStyle.height;
以上代码,高版本浏览器能准确获取到div的当前高度;低版本的浏览器(如 ie6)不能准确获取到div的当前高度,获取到的是 auto,要准确获取到div的高度需要用下面的方法。
二、js用offsetHeight获取div的自适应高度
元素的 offsetHeight 属性,即位移高度的意思;用它无论在高版本的还是低版本的ie中都准确获取到div的当前自适应高度,具体代码如下:
<div id="content"></div>
var obj = document.getElementById("content");
var h = obj.offsetHeight;
如果设计的网页要求能在ie6这样的古董级旧版本的浏览器正常浏览,就用这样的方法;如果不需兼顾低版本浏览器,就选择第一种方法。
-
相关阅读
- javascript设置html元素属性(setAttribute)与
- javascript获取、设置修改img的src属性(get/setAt
- javascript 多维数组定义(js list
- javascript删除前弹出确认/取消询问窗口conf
- ie地址栏执行javascript命令及无法执行的解决
- 注释html和javascript代码的符号及方法
- 网页载入后,为元素(div、img、text、button)动
- 提交表单,为什么javascript没有检查输入内容就提
- CSS实现UL自适应高度
- javascript取整与取模运算(/%)
- 浏览器禁用了javascript怎么办
- javascript 和 Application_BeginRequest