maxHeight屬性設置/返回元素的最大高度。 maxHeight屬性僅影響block-level元素,絕對或固定位置元素。
用法:
- 它用於設置maxHeight屬性:
object.style.maxHeight = "none|length|%|initial|inherit"
- 它用於返回maxHeight屬性:
object.style.maxHeight
示例1:使用長度單位設置元素的最大高度。
<!DOCTYPE html>
<html>
<head>
<title>DOM Style maxHeight Property </title>
</head>
<style>
#Geek1 {
color:white;
height:100px;
background:green;
}
</style>
<body>
<center>
<h1 id="Geek1">
GeeksForGeeks
</h1>
<h2>DOM Style maxHeight Property </h2>
<br>
<button type="button" onclick="mygeeks()">
Click to change
</button>
<script>
function mygeeks() {
// Set maximum height using
// Using length unit.
document.getElementById(
"Geek1").style.maxHeight =
"40px";
}
</script>
</center>
</body>
</html>
輸出
- 在單擊按鈕之前:
- 單擊按鈕後:
示例2:使用“%”設置最大高度
<!DOCTYPE html>
<html>
<head>
<title>DOM Style maxHeight Property </title>
</head>
<style>
#Geek1 {
color:white;
height:50%;
background:green;
}
#Geek_Center {
background:yellow;
width:400px;
height:150px;
margin-left:150px;
text-align:center;
}
</style>
<body>
<div id="Geek_Center">
<h3 id="Geek1">
GeeksForGeeks
</h3>
<h2>DOM Style maxHeight Property </h2>
<br>
<button type="button" onclick="mygeeks()">
Click to change
</button>
</div>
<script>
function mygeeks() {
//set maximum height.
document.getElementById(
"Geek1").style.maxHeight = "35%";
}
</script>
</body>
</html>
輸出
- 在單擊按鈕之前:
- 單擊按鈕後:
支持的瀏覽器:HTML支持的瀏覽器| DOM樣式maxHeight屬性>列出如下:
- 穀歌瀏覽器
- Edge
- 火狐瀏覽器
- Opera
- Safari
相關用法
- HTML Style top用法及代碼示例
- HTML Style right用法及代碼示例
- HTML Style textDecorationColor用法及代碼示例
- HTML Style lineHeight用法及代碼示例
- HTML Style animationTimingFunction用法及代碼示例
- HTML Style animationFillMode用法及代碼示例
- HTML Style fontStyle用法及代碼示例
- HTML Style visibility用法及代碼示例
- HTML Style wordSpacing用法及代碼示例
- HTML Style pageBreakBefore用法及代碼示例
- HTML Style paddingRight用法及代碼示例
- HTML Style paddingLeft用法及代碼示例
- HTML Style paddingBottom用法及代碼示例
- HTML Style width用法及代碼示例
- HTML Style paddingTop用法及代碼示例
注:本文由純淨天空篩選整理自PranchalKatiyar大神的英文原創作品 HTML | DOM Style maxHeight Property。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。