JS动态设置页面高度的操作代码

2024-04-18 0 710
目录
  • 准备一个div
  • 开始操作
  • 效果图

准备一个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动态设置页面高度的文章就介绍到这了,更多相关js设置页面高度内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网!

您可能感兴趣的文章:

  • vue.js动态设置VueComponent高度遇到的问题及解决
  • JavaScript设置body高度为浏览器高度的方法
  • js style动态设置table高度
  • javascript获取设置div的高度和宽度兼容任何浏览器
  • JavaScript自动设置IFrame高度的小例子
  • JavaScript设置IFrame高度自适应(兼容各主流浏览器)

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 JavaScript JS动态设置页面高度的操作代码 https://www.u-9.cn/biancheng/javascript/186575.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务