JS動(dòng)態(tài)設(shè)置頁面高度的操作代碼
更新時(shí)間：2024年04月03日 10:31:47 作者：海鷗兩三
這篇文章主要介紹了JS動(dòng)態(tài)設(shè)置頁面高度的操作代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
準(zhǔn)備一個(gè)div
<div class="card-edit">
<!-- 業(yè)務(wù)需求 -->
</div>開始操作
// 獲取頁面的中需要設(shè)置高度的元素 如：card-edit
const autoStyle = document.getElementsByClassName('card-edit')[0]
// 根據(jù)業(yè)務(wù)需求做判斷
// 此處設(shè)定，如果傳進(jìn)來的值是 'modify'，意為進(jìn)入到詳情頁面，展示頁面高度為100%
// 如果傳進(jìn)來的值不是 'modify'，意為進(jìn)入到修改頁面或者是新增頁面，展示頁面高度為88%.因?yàn)槲业木庉嬳撁娴撞抗潭ㄓ幸粋€(gè)按鈕。
if (mode.value == 'modify') { //詳情
autoStyle.style.maxHeight = '100%'
} else { // 新增或者修改
autoStyle.style.maxHeight = '88%'
}可以打印下看看里面都有些什么值，你設(shè)置過的值都會(huì)在底部或者頂部顯示，如下圖。
console.log(autoStyle.style)
里面有很多很多的值，但是基本都是駝峰命名。
效果圖
到此這篇關(guān)于JS動(dòng)態(tài)設(shè)置頁面高度的文章就介紹到這了,更多相關(guān)js設(shè)置頁面高度內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
深入講解xhr（XMLHttpRequest）/jsonp請(qǐng)求之a(chǎn)bort
這篇文章主要給大家深入的介紹了關(guān)于xhr（XMLHttpRequest）/jsonp請(qǐng)求之a(chǎn)bort的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-07-07
這篇文章主要介紹了JS異步函數(shù)隊(duì)列功能,結(jié)合實(shí)例形式分析了異步函數(shù)隊(duì)列的應(yīng)用場(chǎng)景、實(shí)現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下2017-11-11
今天小編就為大家分享一篇淺談layui里的上傳控件問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JQuery 進(jìn)行跨域請(qǐng)求實(shí)現(xiàn)代碼，需要的朋友可以參考下。2010-01-01
layui字體圖標(biāo) loading圖標(biāo)靜止不旋轉(zhuǎn)的解決方法
今天小編就為大家分享一篇layui字體圖標(biāo) loading圖標(biāo)靜止不旋轉(zhuǎn)的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
Bootstrap的Carousel配合dropload.js實(shí)現(xiàn)移動(dòng)端滑動(dòng)切換圖片
這篇文章主要介紹了bootstrap的Carousel配合dropload.js實(shí)現(xiàn)移動(dòng)端滑動(dòng)切換圖片,實(shí)現(xiàn)方法非常簡(jiǎn)單，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
JSON（JavaScript Object Notation）即JavaScript對(duì)象表示法，是一種輕量級(jí)的數(shù)據(jù)交換格式。它非常便于編程人員對(duì)數(shù)據(jù)的處理，也便于機(jī)器對(duì)數(shù)據(jù)的解析和生成，應(yīng)用非常廣泛2016-02-02
基于JS實(shí)現(xiàn)點(diǎn)擊圖片在彈出層顯示大圖效果
Javascript是個(gè)好東西。Jquery是基于這個(gè)好東西的一個(gè)強(qiáng)大的庫。本文將利用JavaScript實(shí)現(xiàn)點(diǎn)擊圖片在彈出層顯示大圖功能，感興趣的可以了解一下2022-08-08
本文主要分享了原生js實(shí)現(xiàn)無縫輪播圖效果的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
JS實(shí)現(xiàn)指定區(qū)域的全屏顯示功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)指定區(qū)域的全屏顯示功能,涉及javascript事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-04-04