Mengatur Nilai Lapisan HTML Menggunakan Padding Style DOM
 |
| Properti Padding Style DOM |
Properti style padding dapat digunakan dengan empat cara, sebagai berikut:
- div {padding: 30px}, pada kondisi ini, semua sudut memiliki nilai padding sebesar 30px.
- div {padding: 100px 50px}, pada kondisi ini, padding top dan bottom diatur menjadi 100px, sedangkan padding kiri dan kanan menjadi 50px.
- div {padding: 10px 20px 50px}, pada kondisi ini, padding top diatur menjadi 10px, padding kiri dan kanan menjadi 20px, dan padding bottom menjadi 50px.
- div {padding: 100px 10px 20px 40px}, pada kondisi ini, padding top diatur menjadi 100px, padding kanan menjadi 10px, padding bottom menjadi 20px, dan padding kiri menjadi 40px.
Sintak:
- digunakan untuk mendapatkan nilai properti padding: object.style.padding
- digunakan untuk mengatur nilai properti: object.style.padding = "%|length|initial|inherit"
Return Values: berfungsi untuk mengembalikan sebuah nilai string yang merepersentasikan padding dari suatu elemen.
- %: digunakan untuk mendefinisikan nilai padding dalam satuan persen dari lebar elemen parent.
- length: digunakan untuk mendefinisikan padding dalam satuan unit length.
- initial: digunakan untuk mengatur nilai properti menjadi nilai default.
- inherit: digunakan untuk menerima nilai turunan properti dari elemen parent.
Berikut adalah ilustrasi program style padding.
Contoh: pengaturan padding 30px untuk elemen DIV.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style padding HTML
</title>
<style>
#samplediv
{
border: 1px solid green;
}
h1
{
color: green;
}
h2
{
font-family: Impact;
}
body
{
text-align: center;
}
</style>
</head>
<body>
<h1>
Blog Elfan
</h1>
<h2>
Properti Style padding
</h2>
<br>
<div id="samplediv">
Blog Elfan
</div>
<p>
Untuk mengatur padding, double
klik pada tombol "Set
Padding":
</p>
<br>
<button
ondblclick="padding()">
Set Padding
</button>
<script>
function padding()
{
document.getElementById("samplediv")
.style.padding = "30px";
}
</script>
</body>
</html>
Blog Elfan
Properti Style padding
Untuk mengatur padding, double klik pada tombol "Set Padding":
Contoh: pengaturan nilai padding 100px dan 50px untuk elemen DIV.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style padding pada
HTML
</title>
<style>
#samplediv
{
border: 1px solid green;
}
h1
{
color: green;
}
h2
{
font-family: Impact;
}
body
{
text-align: center;
}
</style>
</head>
<body>
<h1>
Blog Elfan
</h1>
<h2>
Properti Style padding
</h2>
<br>
<div id="samplediv">
Blog TIK
</div>
<p>
Untuk mengatur padding, double
klik pada tombol "Set
Padding":
</p>
<br>
<button
ondblclick="padding()">
Set Padding
</button>
<script>
function padding()
{
document.getElementById("samplediv")
.style.padding = "100px 50px";
}
</script>
</body>
</html>
Output:Blog Elfan
Properti Style padding
Untuk mengatur padding, double klik pada tombol "Set Padding":
Contoh: Pengaturan nilai padding 10px, 20px, dan 50px untuk elemen DIV.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style padding HTML
</title>
<style>
#samplediv
{
border: 1px solid green;
}
h1
{
color: green;
}
h2
{
font-family: Impact;
}
body
{
text-align: center;
}
</style>
</head>
<body>
<h1>
Blog Elfan
</h1>
<h2>
Properti Style padding
</h2>
<br>
<div id="samplediv">
Blog TIK
</div>
<p>
Untuk mengatur padding, double
klik pada tombol "Set
Padding":
</p>
<br>
<button
ondblclick="padding()">
Set Padding
</button>
<script>
function padding()
{
document.getElementById("samplediv")
.style.padding = "10px 20px 50px";
}
</script>
</body>
</html>
Output:Blog Elfan
Properti Style padding
Untuk mengatur padding, double klik pada tombol "Set Padding":
Contoh: pengaturan nilai padding 100px, 10px, 20px, dan 40px untuk elemen DIV.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style padding pada
HTML
</title>
<style>
#samplediv
{
border: 1px solid green;
}
h1
{
color: green;
}
h2
{
font-family: Impact;
}
body
{
text-align: center;
}
</style>
</head>
<body>
<h1>
Blog Elfan
</h1>
<h2>
Properti Style padding
</h2>
<br>
<div id="samplediv">
Blog TIK
</div>
<p>
Untuk mengatur padding, double
klik pada tombol "Set
Padding":
</p>
<br>
<button
ondblclick="padding()">
Set Padding
</button>
<script>
function padding()
{
document.getElementById("samplediv")
.style.padding = "100px 10px 20px 40px";
}
</script>
</body>
</html>
Blog Elfan
Properti Style padding
Untuk mengatur padding, double klik pada tombol "Set Padding":
- 8 Value Properti pageBreakAfter Style DOM pada HTML [klik]
- 8 Value Properti pageBreakBefore Style DOM pada HTML [klik]
- 4 Value Properti pageBreakInside Style DOM pada HTML [klik]
- 4 Value Properti Perspective Style DOM pada HTML [klik]
- 3+ Value Properti perspectiveOrigin Style DOM pada HTML [klik]
- 7 Value Properti Position Style DOM pada HTML [klik]
- 11 Karakter Tanda Kutip Style DOM pada HTML [klik]
5 komentar untuk "Mengatur Nilai Lapisan HTML Menggunakan Padding Style DOM"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti padding style dom pada HTML? berapa browser?
BalasHapusBerikut ini ditampilkan beberapa jenis browser yang dapat digunakan oleh seorang pengembang dalam pengaktifkan properti padding style DOM pada HTML:
Hapus1. Google Chrome
2. Internet Explorer
3. Firefox
4. Opera
5. Apple Safari
Apa fungsi dari properti padding Style DOM pada HTML?
BalasHapusProperti padding digunakan untuk menyisipkan ruang pada sekitar elemen.
HapusProperti padding style DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mendapatkan nilai pading dari suatu elemen.
Hapus