脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js设置页面高度

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

 更新时间：2024年04月03日 10:31:47   作者：海鸥两三  
这篇文章主要介绍了JS动态设置页面高度的操作代码,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧

准备一个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设置页面高度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 深入讲解xhr（XMLHttpRequest）/jsonp请求之abort

    深入讲解xhr（XMLHttpRequest）/jsonp请求之abort

    这篇文章主要给大家深入的介绍了关于xhr（XMLHttpRequest）/jsonp请求之abort的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-07-07
  • JS异步函数队列功能实例分析

    JS异步函数队列功能实例分析

    这篇文章主要介绍了JS异步函数队列功能,结合实例形式分析了异步函数队列的应用场景、实现方法与相关操作技巧,需要的朋友可以参考下
    2017-11-11
  • 浅谈layui里的上传控件问题

    浅谈layui里的上传控件问题

    今天小编就为大家分享一篇浅谈layui里的上传控件问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 使用JQuery进行跨域请求

    使用JQuery进行跨域请求

    JQuery 进行跨域请求实现代码，需要的朋友可以参考下。
    2010-01-01
  • layui字体图标 loading图标静止不旋转的解决方法

    layui字体图标 loading图标静止不旋转的解决方法

    今天小编就为大家分享一篇layui字体图标 loading图标静止不旋转的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片

    Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片

    这篇文章主要介绍了bootstrap的Carousel配合dropload.js实现移动端滑动切换图片,实现方法非常简单，具有参考借鉴价值，需要的朋友可以参考下
    2017-03-03
  • JSON简介以及用法汇总

    JSON简介以及用法汇总

    JSON（JavaScript Object Notation）即JavaScript对象表示法，是一种轻量级的数据交换格式。它非常便于编程人员对数据的处理，也便于机器对数据的解析和生成，应用非常广泛
    2016-02-02
  • 基于JS实现点击图片在弹出层显示大图效果

    基于JS实现点击图片在弹出层显示大图效果

    Javascript是个好东西。Jquery是基于这个好东西的一个强大的库。本文将利用JavaScript实现点击图片在弹出层显示大图功能，感兴趣的可以了解一下
    2022-08-08
  • 原生js实现无缝轮播图效果

    原生js实现无缝轮播图效果

    本文主要分享了原生js实现无缝轮播图效果的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • JS实现指定区域的全屏显示功能示例

    JS实现指定区域的全屏显示功能示例

    这篇文章主要介绍了JS实现指定区域的全屏显示功能,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2019-04-04

最新评论