HTML DOM Style bottom property
Style Objects Definition and Usage
bottom property sets or returns the position of the bottom of the positioning element.
This attribute specifies the bottom position of an element, comprising: padding, scroll bars, borders, and margins.
Tip: a positioning element is the element's position attribute is set: relative (relative), absolute (absolute) or fixed (fixed).
grammar
Setting bottom properties:
Object.style.bottom="auto|length|%|inherit"
Returns bottom properties:
Object.style.bottom
| 值 | 描述 |
|---|---|
| auto | 默认。通过浏览器计算底部的位置。 |
| length | 使用 px、cm 等单位设置元素的底边到最近一个具有定位设置父元素的底部边缘的位置。可使用负值。 |
| % | 设置元素的底边到最近一个具有定位设置父元素的底部边缘的百分比位置。 |
| inherit | bottom 属性的值从父元素继承。 |
Browser Support
All major browsers support bottom properties.
Note: IE7 and earlier versions do not support the "inherit" value.IE8 only provides! DOCTYPE supported "inherit". IE9 support "inherit".
Examples
Examples
Settings button at the bottom position:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<style type="text/css">
#b1{
position:absolute;
}
</style>
<script>
function displayResult(){
document.getElementById("b1").style.bottom="100px";
}
</script>
</head>
<body>
<input type="button" id="b1" onclick="displayResult()" value="设置底部的位置">
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<style type="text/css">
#b1{
position:absolute;
}
</style>
<script>
function displayResult(){
document.getElementById("b1").style.bottom="100px";
}
</script>
</head>
<body>
<input type="button" id="b1" onclick="displayResult()" value="设置底部的位置">
</body>
</html>
try it"
Style Objects