JS动态设置页面高度的操作代码
作者:竹影时间:2026-10-31 12:59:46浏览:158
本文介绍如何使用JavaScript动态设置页面元素的高度。通过获取特定class的元素,根据业务模式(如'modify'详情模式或其他新增/修改模式)判断,动态调整其CSS的maxHeight属性,分别设置为100%或88%,以适配底部固定按钮等布局需求。
首先准备一个div容器。
<div class="card-edit">
<!-- 业务需求 -->
</div>接下来开始执行具体操作。
// 获取页面的中需要设置高度的元素 如:card-edit
const autoStyle = document.getElementsByClassName('card-edit')[0]
// 根据业务需求做判断
// 此处设定,如果传进来的值是 'modify',意为进入到详情页面,展示页面高度为100%
// 如果传进来的值不是 'modify',意为进入到修改页面或者是新增页面,展示页面高度为88%.因为我的编辑页面底部固定有一个按钮。
if (mode.value == 'modify') { //详情
autoStyle.style.maxHeight = '100%'
} else { // 新增或者修改
autoStyle.style.maxHeight = '88%'
}你可以打印查看相关属性值,之前设置的数值会在页面顶部或底部显示,具体效果如下图所示。
console.log(autoStyle.style)
该对象包含大量属性,但大多数遵循驼峰命名法。
最终效果展示。

关于JS动态设置页面高度的内容介绍至此,更多相关js设置页面高度内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!
作者最新文章
JS怎么使用classList添加、删除和切换class
2026-11-05 17:26:02
网页开发三者分工:HTML结构、CSS样式与JavaScript交互怎么协作
2026-11-05 12:51:22
JS解析URL参数时怎么处理中文乱码和特殊字符
2026-11-05 12:47:23
js-cookie 存储 JSON 对象:自动序列化与反序列化技巧
2026-11-05 12:36:26
marked.js 快速上手:安装与基础 Markdown 转 HTML 示例
2026-11-05 09:32:53
