Mengatur Batas Spasi HTML Menggunakan borderSpacing Style DOM
- untuk mendapatkan nilai properti borderSpacing: object.style.borderSpacing
- untuk mengatur nilai properti borderSpacing: object.style.borderSpacing = "length | initial | inherit"
Return Values: berfungsi untuk mengembalikan sebuah nilai string, yang merepresentasikan ruang diantara sel pada tabel HTML.
Property Values:
- length: digunakan untuk menentukan nilai length diantara sel yang saling bersesuaian dengan unit, dimana tidak diperbolehkan ada nilai negatif yang disertakan pada value ini, dimana nilai default-nya adalah 0.
- initial: digunakan untuk mengatur properti borderSpacing ke nilai default-nya.
- inherit: digunakan untuk menerima nilai turunan dari elemen parent.
Beberapa contoh demonstrasi program yang menggunakan value dari properti borderSpacing diperlihatkan sebagai berikut.
Contoh: penggunaan satu nilai untuk menentukan nilai spasi horizontal dan vertikal secara bersamaan.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style BorderSpacing
DOM
</title>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style BorderSpacing
DOM
</b>
<table
id="table"
border="1">
<tr>
<th>Author</th>
<th>Articles</th>
</tr>
<tr>
<td>Junai</td>
<td>101</td>
</tr>
<tr>
<td>Junet</td>
<td>51</td>
</tr>
<tr>
<td>Dudun</td>
<td>231</td>
</tr>
</table>
<br>
<button
type="button"
onclick="changeSpacing()">
Change border spacing
</button>
<script>
function changeSpacing()
{
elem = document.querySelector("#table");
// Pengaturan spasi border
elem.style.borderSpacing = "10px";
}
</script>
</body>
</html>
Output:Blog Elfan
Properti Style BorderSpacing DOM| Author | Articles |
|---|---|
| Junai | 101 |
| Junet | 51 |
| Dudun | 231 |
Contoh: penggunaan dua nilai untuk menentukan spasi horizontal dan vertikal secara terpisah.
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style BorderSpacing
</title>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style BorderSpacing
DOM
</b>
<table
id="table"
border="1">
<tr>
<th>Author</th>
<th>Articles</th>
</tr>
<tr>
<td>Jinny</td>
<td>102</td>
</tr>
<tr>
<td>Simorangkir</td>
<td>52</td>
</tr>
<tr>
<td>Tony</td>
<td>232</td>
</tr>
</table>
<br>
<button
type="button"
onclick="changeSpacing()">
Change border spacing
</button>
<script>
function changeSpacing()
{
elem = document.querySelector("#table");
// Pengaturan spasi border
elem.style.borderSpacing = "20px 5px";
}
</script>
</body>
</html>
Output:Blog Elfan
Properti Style BorderSpacing DOM| Author | Articles |
|---|---|
| Jinny | 102 |
| Simorangkir | 52 |
| Tony | 232 |
Contoh: penggunaan nilai initial.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style BorderSpacing
DOM
</title>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
DOM Style BorderSpacing
</b>
<table
id="table"
border="1">
<tr>
<th>Author</th>
<th>Articles</th>
</tr>
<tr>
<td>Dian</td>
<td>103</td>
</tr>
<tr>
<td>Bebeng</td>
<td>53</td>
</tr>
<tr>
<td>Tina</td>
<td>233</td>
</tr>
</table>
<br>
<button
type="button"
onclick="changeSpacing()">
Change border spacing
</button>
<script>
function changeSpacing()
{
elem = document.querySelector("#table");
// pengaturan spasi border
elem.style.borderSpacing = "initial";
}
</script>
</body>
</html>
Output:Blog Elfan
DOM Style BorderSpacing| Author | Articles |
|---|---|
| Dian | 103 |
| Bebeng | 53 |
| Tina | 233 |
Contoh: penggunaan nilai inherit.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style BorderSpacing
DOM
</title>
<style>
/* Pengaturan spasi border
dari nilai parent */
#parent
{
border-spacing: 10px;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style BorderSpacing
DOM
</b>
<div
id="parent">
<table
id="table"
border="1">
<tr>
<th>Author</th>
<th>Articles</th>
</tr>
<tr>
<td>Dudun</td>
<td>104</td>
</tr>
<tr>
<td>Sima</td>
<td>54</td>
</tr>
<tr>
<td>Cima</td>
<td>234</td>
</tr>
</table>
</div>
<br>
<button
type="button"
onclick="changeSpacing()">
Change border spacing
</button>
<script>
function changeSpacing()
{
elem = document.querySelector("#table");
// Pengaturan spasi border
elem.style.borderSpacing = "inherit";
}
</script>
</body>
</html>
Output:Blog Elfan
Properti Style BorderSpacing DOM| Author | Articles |
|---|---|
| Dudun | 104 |
| Sima | 54 |
| Cima | 234 |
- 6 Contoh Properti borderTopRightRadius Style DOM pada HTML
- 12 Contoh Properti borderTopStyle DOM pada HTML
- 6 Contoh Properti borderTopWidth Style DOM pada HTML
- 6 Contoh Properti borderWidth Style DOM pada HTML
- 8 Value Properti boxShadow Style DOM pada HTML
- 4 Contoh Properti boxSizing Style DOM pada HTML
- 4 Contoh Properti captionSide Style DOM pada HTML
5 komentar untuk "Mengatur Batas Spasi HTML Menggunakan borderSpacing 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 borderSpacing Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti borderSpacing Style DOM pada HTML:
Hapus1. Chrome
2. Internet Explorer 9.0
3. Firefox
4. Opera
5. Safari
Apa yang dimaksud dengan properti borderSpacing Style DOM pada HTML?
BalasHapusProperti borderSpacing merupakan properti yang digunakan untuk mengatur atau mengembalikan nilai antar ruang sel dalam suatu tabel pada dokumen HTML.
HapusProperti borderSpacing merupakan properti yang digunakan untuk menetapkan atau mendapatkan nilai ruang antar sel dalam suatu table, dimana properti ini tidak akan berpengaruh apapun pada suatu elemen jika properti borderCollapse digunakan atau diaktifkan ke tipe collapse atau diciutkan.
Hapus