Style paddingLeft屬性用於設置或返回元素的左填充。 padding屬性將用戶所需的空間插入到元素的邊界內。
用法:
- 要獲得該屬性:
object.style.paddingLeft
- 設置屬性:
object.style.left = "auto|length|%|initial|inherit"
屬性值:
- auto:它用於讓瀏覽器設置左側位置。
- length:用於定義長度單位的左填充。
- %:它用於定義父元素寬度百分比的左填充。
- initial:它用於將此屬性設置為其默認值。
- inherit:它用於從其父元素繼承此屬性。
以下示例程序旨在說明style paddingLeft屬性方法:
示例:設置<div>元素的左填充。
<!DOCTYPE html>
<html>
<head>
<title>Style paddingLeft in HTML</title>
<style>
#MyElement {
border:1px solid black;
background-color:green;
width:300px;
height:300px;
}
h1 {
color:green;
}
h2 {
font-family:Impact;
}
body {
text-align:center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Style paddingLeft</h2>
<p>For setting the left padding,
double click the "Apply Left Padding" button:</p>
<br>
<button ondblclick="padding()">Apply Left Padding</button>
<div id="MyElement">
Geeksforgeeks is a portal for geeks.
</div>
<script>
function padding() {
document.getElementById("MyElement")
.style.paddingLeft = "100px";
}
</script>
</body>
</html>
輸出:
- 單擊按鈕之前:
- 單擊按鈕後:
支持的瀏覽器:HTML DOM支持的瀏覽器|下麵列出樣式paddingLeft屬性:
- 穀歌瀏覽器
- IE瀏覽器
- Firefox
- Opera
- 蘋果Safari
相關用法
- HTML Style paddingLeft用法及代碼示例
- HTML Style right用法及代碼示例
- HTML Style top用法及代碼示例
- HTML Style borderBottom用法及代碼示例
- HTML Style color用法及代碼示例
- HTML Style borderRight用法及代碼示例
- HTML Style overflowY用法及代碼示例
- HTML Style borderLeft用法及代碼示例
- HTML Style borderTopLeftRadius用法及代碼示例
- HTML Style captionSide用法及代碼示例
- HTML Style borderStyle用法及代碼示例
- HTML Style borderTopWidth用法及代碼示例
- HTML Style clip用法及代碼示例
- HTML Style boxShadow用法及代碼示例
- HTML Style columnRule用法及代碼示例
注:本文由純淨天空篩選整理自Shubrodeep Banerjee大神的英文原創作品 HTML DOM | Style paddingLeft Property。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。