HTML DOM中的minHeight属性用于设置或返回元素的最小高度。此属性仅影响block-level元素,绝对或固定位置元素。
用法:
- 它返回minHeight属性。
object.style.minHeight
- 它用于设置minHeight属性。
object.style.minHeight = "length|%|initial|inherit"
属性值:
值 | 描述 |
---|---|
length | 以长度单位定义长度。 |
% | 定义与父元素相比的长度百分比 |
initial | 设置默认的初始值。 |
inherit | 从父元素继承属性。 |
返回值:它返回元素的最小高度。
范例1:
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style minHeight Property
</title>
<style>
#Geek1 {
color:white;
width:50%;
background:green;
}
</style>
</head>
<body>
<center>
<h1 id = "Geek1">
GeeksForGeeks
</h1>
<h2>DOM Style minHeight Property </h2>
<br>
<button type = "button" onclick = "geeks()">
Click to change
</button>
<script>
function geeks() {
document.getElementById("Geek1").style.minHeight
= "150px";
}
</script>
</center>
</body>
</html>
输出:
- 在单击按钮之前:
- 单击按钮后:
范例2:
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style minHeight Property
</title>
<style>
#Geek1 {
color:white;
width:50%;
background:green;
}
#Geek_Center {
background:yellow;
height:200px;
}
</style>
</head>
<body>
<center id = "Geek_Center">
<h1 id = "Geek1">
GeeksForGeeks
</h1>
<h2>DOM Style minHeight Property </h2>
<br>
<button type = "button" onclick = "geeks()">
Click to change
</button>
<script>
function geeks() {
document.getElementById("Geek1").style.minHeight
= "50%";
}
</script>
</center>
</body>
</html>
输出:
- 在单击按钮之前:
- 单击按钮后:
支持的浏览器:下面列出了DOM Style minHeight属性支持的浏览器:
- 谷歌浏览器
- IE浏览器
- 火狐浏览器
- Opera
- Safari
相关用法
- HTML Style right用法及代码示例
- HTML Style top用法及代码示例
- HTML Style borderLeft用法及代码示例
- HTML Style textDecorationLine用法及代码示例
- HTML Style borderRight用法及代码示例
- HTML Style textAlign用法及代码示例
- HTML Style wordSpacing用法及代码示例
- HTML Style opacity用法及代码示例
- HTML Style height用法及代码示例
- HTML Style whiteSpace用法及代码示例
- HTML Style textDecoration用法及代码示例
- HTML Style columnRuleStyle用法及代码示例
- HTML Style display用法及代码示例
- HTML Style transformStyle用法及代码示例
- HTML Style visibility用法及代码示例
注:本文由纯净天空筛选整理自PranchalKatiyar大神的英文原创作品 HTML | DOM Style minHeight Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。