Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengatur Batas Kiri HTML Menggunakan marginLeft Style DOM

Properti Style marginLeft DOM pada HTML digunakan untuk mengatur atau mendapatkan nilai dari margin left dari suatu elemen. Nilai margin ini digunakan untuk menambahkan ruang diantara border yang tersedia pada margin, yang berbeda dengan padding yang digunakan untuk menambahkan ruang yang berada diantara elemen tertentu.

5 Value Properti marginLeft Style DOM pada HTML
Properti marginLeft Style DOM

Sebelum memahami lebih dalam materi tentang Mengatur Batas Kiri HTML Menggunakan marginLeft Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Batas Bawah HTML Menggunakan marginBottom Style DOM [klik], Mengatur Ukuran Batas HTML Menggunakan Margin Style DOM [klik], dan Mengatur Daftar Tipe HTML Menggunakan listStyleType DOM [klik].

Sintak:
  • digunakan untuk mengatur nilai properti marginLeft: object.style.marginLeft='%|length|auto|initial|inherit'
  • digunakan untuk mengembalikan nilai properti marginLeft: object.style.marginLeft

Property Values:
  • %: digunakan untuk mendefinisikan nilai margin left dalam satuan persen dari nilai lemen dari parent-nya.
  • length: digunakan untuk mendefinisikan nilai margin left dalam istilah unit length.
  • auto: digunakan ketika left margin nilainya akan ditentukan oleh browser.
  • initial: digunakan untuk mengatur value dari properti ke nilai default-nya.
  • inherit: digunakan untuk menerima nilai turunan dari properti yang nilainya sama dengan nilai elemen parent.

Default Values: nilai default dari properti adalah 0.

Return Values: berfungsi untuk mengembalikan sebuah string yang merepresentasikan nilai margin left.

Baca Juga:

Contoh: mengembalikan nilai margin left.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style marginLeft DOM

</title>

 

<style>

#d 

{border: 2px solid black;}

</style>

 

</head>

 

<body>

<div 

id="d" 

style="margin-left:3cm;">

Blog TIK merupaka portal ilmu 

komputer.

</div>

 

<br>

 

<button 

type="button" 

onclick="myFunction()">

Return left margin

</button>

 

<script>

function myFunction() 

{

// Mengembalikan nilai left 

// margin.

alert(document.getElementById("d").style.marginLeft);

}

</script>

 

</body>

 

</html>

Output:
Blog TIK merupaka portal ilmu komputer.



Contoh: mengatur nilai margin left menggunakan unit ukur length.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style marginLeft DOM

</title>

 

<style>

#d 

{border: 2px solid black;}

</style>

 

</head>

 

<body>

 

<div 

id="d">

Blog TIK merupakan portal ilmu 

komputer.

</div>

 

<br>

 

<button 

type="button" 

onclick="myFunction()">

Set leftmargin

</button>

 

<script>

function myFunction() 

{

// Pengaturan margin left.

document.getElementById("d").style.marginLeft = "10px";

}

</script>

 

</body>

 

</html>

Output:
Blog TIK merupakan portal ilmu komputer.



Contoh: mengatur nilai margin left menggunakan satuan persen.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style marginLeft DOM

</title>

 

<style>

#d 

{border: 2px solid black;}

</style>

 

</head>

 

<body>

 

<div 

id="d">

Blog TIK merupakan portal ilmu 

komputer.

</div>

 

<br>

 

<button 

type="button" 

onclick="myFunction()">

Set leftmargin

</button>

 

<script>

function myFunction() 

{

// Pengaturan left margin.

document.getElementById("d").style.marginLeft = "10%";

}

</script>

 

</body>

 

</html>

Output:
Blog TIK merupakan portal ilmu komputer.


Artikel ini didedikasikan kepada: Aurelia Arini Arthatami, Azzahra Andhira Putri, A'Lamuna Yustika Amini, Bekti Prihanto, dan Bobby Alessandro Evandra Lutfi Nugroho.

5 komentar untuk "Mengatur Batas Kiri HTML Menggunakan marginLeft Style DOM"

  1. Jenis browser apa saja yang dapat digunakan oleh seorang pengembang untuk mengaktifkan properti marginLeft Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut ini adalah beberapa jenis browser populer yang dapat digunakan untuk mengaktifkan properti marginLeft Style DOM pada HTML:
      1. Google Chrome
      2. Edge
      3. Mozilla Firefox
      4. Opera
      5. Safari

      Hapus
  2. Apa yang dimaksud dengan margin Left Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti marginLeft Style DOM pada HTML merupakan properti yang digunakan untuk menetapkan atau mengembalikan margin bagian kiri dari suatu elemen.

      Hapus
    2. Properti marginLeft Style DOM pada HTML merupakan properti yang digunakan untuk mengembalikan dan memodifikasi margin bagian kiri dari elemen dalam dokumen HTML.

      Hapus

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 -