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。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。