JS動(dòng)態(tài)更改div高度實(shí)現(xiàn)代碼例子
更新時(shí)間：2023年11月11日 08:29:58 作者：洋哥登陸
在Web開(kāi)發(fā)中通過(guò)使用JavaScript可以動(dòng)態(tài)地修改HTML元素的屬性和樣式,下面這篇文章主要給大家介紹了關(guān)于JS動(dòng)態(tài)更改div高度實(shí)現(xiàn)的相關(guān)資料,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下
前言
通過(guò)JS動(dòng)態(tài)更改div高度。高度大于限定值內(nèi)容進(jìn)行折疊，顯示view more。點(diǎn)擊后顯示全部?jī)?nèi)容。
js代碼
<html>
<body onload="queryHeight()">
<!-- div容器 -->
<div class="container">
<!-- 文本內(nèi)容 高度可能為1000以上 -->
</div>
<div id="readMore" class="readMore">
<div class="readBackground"></div>
<div class="readText" onclick="show()"> Read more ∨</div>
</div>
<script>
var contentHeight = 0
function queryHeight() {
const content = document.getElementsByClassName('container')[0]
// 要獲得真實(shí)高度，需用 onload 來(lái)執(zhí)行方法
contentHeight = content.offsetHeight
if(content.offsetHeight > 800){
content.style.height = 800
content.style.overflow = 'hidden'
}
}
function show() {
const content = document.getElementsByClassName('container')[0]
content.style.height = contentHeight
content.style.overflow = ''
const readMore = document.getElementById('readMore')
readMore.style.display = 'none'
}
</script>
</body>
</html>
<style>
body{
margin: 0px;
width: 100%;
height: 100%;
background-color: #EFEFEF;
}
.container{
width: 100%;
height: 1500px;
background-color: #FFFFFF;
}
.td-content{
height: auto;
}
/* read-more */
.readMore{
position: absolute;
width: 100%;
height: 60px;
text-align: center;
font-size: 14px;
font-family: 'Roboto-Regular, Roboto';
font-weight: 600;
color: #000000;
line-height: 40px;
}
.readBackground{
width: 100%;
height: 20px;
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF 100%);
}
.readText{
background-color: #FFFFFF;
}
</style>效果
點(diǎn)擊前
點(diǎn)擊后
總結(jié)
到此這篇關(guān)于JS動(dòng)態(tài)更改div高度實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)JS動(dòng)態(tài)更改div高度內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要是通過(guò)javascript實(shí)現(xiàn)禁止瀏覽器中復(fù)制文本內(nèi)容的方法，十分的簡(jiǎn)單，而且兼容IE和FF，有需要的小伙伴可以參考下2015-06-06
一文解決前端JS小數(shù)運(yùn)算精度問(wèn)題
在做項(xiàng)目的時(shí)候,前端需要在表格的底部做一個(gè)匯總的功能,在采用reduce對(duì)當(dāng)前屬性所有值匯總時(shí),發(fā)現(xiàn)匯總結(jié)果存在好長(zhǎng)的小數(shù)位,本文給大家介紹了如何解決前端JS小數(shù)運(yùn)算精度問(wèn)題,需要的朋友可以參考下2024-02-02
Bootstrap每天必學(xué)之標(biāo)簽頁(yè)（Tab）插件
Bootstrap每天必學(xué)之標(biāo)簽頁(yè)（Tab）插件，通過(guò)這個(gè)插件您可以把內(nèi)容放置在標(biāo)簽頁(yè)或者是膠囊式標(biāo)簽頁(yè)甚至是下拉菜單標(biāo)簽頁(yè)中，感興趣的小伙伴們可以參考一下2016-04-04
將Sublime Text 3 添加到右鍵中的簡(jiǎn)單方法
下面小編就為大家分享一篇將Sublime Text 3 添加到右鍵中的簡(jiǎn)單方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
JS中的THIS和WINDOW.EVENT.SRCELEMENT詳解
對(duì)于js初學(xué)著必須理解this和srcElement的應(yīng)用，這也是面試中經(jīng)?？嫉降?。下面我們就通過(guò)幾個(gè)示例來(lái)詳細(xì)了解下2015-05-05
淺析javascript異步執(zhí)行函數(shù)導(dǎo)致的變量變化問(wèn)題解決思路
下面小編就為大家?guī)?lái)一篇淺析javascript異步執(zhí)行函數(shù)導(dǎo)致的變量變化問(wèn)題解決思路。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-05-05
如何利用JS將手機(jī)號(hào)中間四位變成*號(hào)
這篇文章主要介紹了如何利用JS將手機(jī)號(hào)中間四位變成*號(hào),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-09
這篇文章主要給大家介紹了關(guān)于如何編寫(xiě)一個(gè)d.ts文件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用d.ts具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04
關(guān)于base64編碼和解碼的js工具函數(shù)
這篇文章主要介紹了關(guān)于base64編碼和解碼的js工具函數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
純javascript代碼實(shí)現(xiàn)計(jì)算器功能(三種方法)
純javascript代碼實(shí)現(xiàn)計(jì)算器功能，接下來(lái)，由小編給大家分享一下用純javascript代碼編寫(xiě)的計(jì)算器程序，需要的朋友可以參考下2015-09-09