美文网首页
设置dom元素高度

设置dom元素高度

作者: bit_拳倾天下 | 来源:发表于2020-11-23 10:51 被阅读0次

获取dom元素高度

开发中遇到组件嵌套的情况,有些内层组件需要外层组件的高度来确定本身高度。

image

如上图,内层的table需要确定高度来实现滚动,而外层container高度不固定,所以不能直接在css中写死table的高度,可以通过以下方法获取container的高度,然后传给table。

let dom = document.querySelector(".enterprise-body-main") //1.获取container dom元素
this.containerHeight = dom.offsetHeight //2.获取dom元素高度

监听浏览器窗口变化

如需要根据窗口变化做某些动作(如:dom高度需要根据窗口变化进行调整),可以结合以下方法:

//监听窗口变化
window.onresize = ()=>{
    //打印浏览器宽高
    console.log(document.body.clientWidth, '==> BODY对象宽度')
    console.log(document.body.clientHeight, '==> BODY对象高度')
    console.log(document.documentElement.clientWidth, '==> 可见区域宽度')
    console.log(document.documentElement.clientHeight, '==> 可见区域高度')
}

相关文章

网友评论

      本文标题:设置dom元素高度

      本文链接:https://www.haomeiwen.com/subject/yxmmiktx.html