JS动态设置页面高度的操作代码
更新时间：2024年04月03日 10:31:47 作者：海鸥两三
这篇文章主要介绍了JS动态设置页面高度的操作代码,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
准备一个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的动态性、易变性在函数的应用上，体现的淋漓尽致。下面这篇文章主要给大家介绍了关于JavaScript学习笔记之惰性函数的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。2017-08-08
下面小编就为大家分享一篇浅谈webpack打包过程中因为图片的路径导致的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要为大家介绍了使用tree?shaking?移除无用代码示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
最近在开微信的页面，在项目需求中遇到之前没有做过的功能，要求横线提示输入验证码随验证码输入横线消失，基于js怎么实现的呢？下面小编给大家分享基于js实现验证码功能，感兴趣的朋友一起看看吧2016-10-10
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
这篇文章主要介绍了JavaScript学习笔记之基于定时器实现图片无缝滚动功能,结合实例形式分析了javascript定时器与页面元素属性动态设置等相关操作技巧,需要的朋友可以参考下2019-01-01
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Knockout是一个以数据模型（data model）为基础的能够帮助你创建富文本，响应显示和编辑用户界面的JavaScript类库。这篇文章介绍了KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定的相关知识，感兴趣的朋友一起看看吧2016-10-10
这篇文章主要为大家介绍了JavaScript时间对象Date内置构造函数操作实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
最近几天闲来无事，随便写了点代码玩了玩。个人觉得，应该把编码当做一种乐趣，要不然会觉得很累...2011-01-01
判断语句这个我们不陌生,就是判断是否满足指定的条件,如果满足则执行一定的代码,否则跳过,下面这篇文章主要给大家介绍了关于JavaScript中判断的优雅写法,需要的朋友可以参考下2021-10-10
在使用ECharts绘制折线图时,为了丰富图表的视觉表达,设计师们常常会为视图搭配上不同的图标,下面这篇文章主要给大家介绍了关于Echarts自定义图形的方法参考,需要的朋友可以参考下2023-02-02
最新评论