Mengatur Margin Kanan HTML Menggunakan marginRight Style DOM
 |
| Properti marginRight Style DOM |
Sintak:
- digunakan untuk mengembalikan nilai properti marginRight: object.style.marginRight
- digunakan untuk mengatur nilai properti marginRight: object.style.marginRight = "length|percentage|auto|initial|inherit"
Return Values: digunakan untuk mengembalikan sebuah nilai string yang merepresentasikan nilai margin right dari suatu elemen.
- length: digunakan untuk menentukan nilai margin yang bersesuaian dengan unit length, dengan nilai default-nya adalah 0.
- percentage: digunakan untuk menentukan jumlah dari margin sebagai nilai persentasi relaitf untuk lebar dari elemen yang dikandung.
- auto: jika nilai properti diatur menjadi 'auto', maka browser secara otomatis akan mengkalkulasi sebuah nilai yang cocok untuk ukuran margin tersebut.
- initial: digunakan untuk mengatur nilai properti ke nilai default-nya.
- inherit: digunakan untuk menerima nilai turunan dari elemen parent.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style marginRight DOM
</title>
<style>
.container
{
display: flex;
flex-direction: row;
padding: 10px 1px;
}
.div1, .div2
{
padding: 5px;
border: 2px solid;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style marginRight DOM
</b>
<div
class="container">
<div
class="div1">
Block One
</div>
<div
class="div2">
Block Two
</div>
</div>
<button
onclick="setMargin()">
Change marginRight
</button>
<!-- Script untuk mengatur
marginRight untuk nilai yang
bersesuaian -->
<script>
function setMargin()
{
elem = document.querySelector('.div1');
elem.style.marginRight = '50px';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style marginRight DOM
</title>
<style>
.container
{
display: flex;
flex-direction: row;
padding: 10px 1px;
}
.div1, .div2
{
padding: 5px;
border: 2px solid;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style marginRight DOM
</b>
<div
class="container">
<div
class="div1">
Block One
</div>
<div
class="div2">
Block Two
</div>
</div>
<button
onclick="setMargin()">
Change marginRight
</button>
<!-- Script untuk mengatur
marginRight untuk nilai yang
bersesuaian -->
<script>
function setMargin()
{
elem = document.querySelector('.div1');
elem.style.marginRight = '20%';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style marginRight DOM
</title>
<style>
.container
{
display: flex;
flex-direction: row;
padding: 10px 1px;
}
.div1, .div2
{
margin-right: 50px;
padding: 5px;
border: 2px solid;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style marginRight DOM
</b>
<div
class="container">
<div
class="div1">
Block One
</div>
<div
class="div2">
Block Two
</div>
</div>
<button
onclick="setMargin()">
Change marginRight
</button>
<!-- Script untuk mengatur
marginRight menjadi auto -->
<script>
function setMargin()
{
elem = document.querySelector('.div1');
elem.style.marginRight = 'auto';
}
</script>
</body>
</html>
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style marginRight DOM
</title>
<style>
.container
{
display: flex;
flex-direction: row;
padding: 10px 1px;
}
.div1, .div2
{
margin-right: 20px;
padding: 5px;
border: 2px solid;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style marginRight DOM
</b>
<div
class="container">
<div
class="div1">
Block One
</div>
<div
class="div2">
Block Two
</div>
</div>
<button
onclick="setMargin()">
Change marginRight
</button>
<!-- Script untuk mengatur
marginRight menjadi initial
-->
<script>
function setMargin()
{
elem = document.querySelector('.div1');
elem.style.marginRight = 'initial';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style marginRight DOM
</title>
<style>
.container
{
margin-right: 50px;
display: flex;
flex-direction: row;
}
.div1, .div2
{
padding: 5px;
border: 2px solid;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style marginRight DOM
</b>
<div
class="container">
<div
class="div1">
Block One
</div>
<div
class="div2">
Block Two
</div>
</div>
<button
onclick="setMargin()">
Change marginRight
</button>
<!-- Script untuk mengatur
marginRight menjadi inherit
-->
<script>
function setMargin()
{
elem = document.querySelector('.div1');
elem.style.marginRight = 'inherit';
}
</script>
</body>
</html>
- 4 Value Properti minWidth Style DOM pada HTML [klik]
- 7 Value Properti objectFit Style DOM pada HTML [klik]
- 3 Contoh Properti objectPosition Style DOM pada HTML [klik]
- 3 Value Properti Opacity Style DOM pada HTML [klik]
- 3 Value Properti Order Style DOM pada HTML [klik]
- 3 Value Properti Orphans Style DOM pada HTML [klik]
- 5 Value Properti Outline Style DOM pada HTML [klik]
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti marginRight Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang biasa digunakan untuk mengaktifkan properti marginRight Style DOM pada HTML:
Hapus1. Google Chrome
2. Internet Explorer
3. Firefox
4. Opera
Apa yang dimaksud dengan properti marginRight Style DOM pada HTML?
BalasHapusProperti marginRight digunakan untuk menetapkan atau mengembalikan margin bagian kanan dari suatu elemen.
HapusProperti marginRight merupakan properti yang digunakan untuk menetapkan atau mengembalikan margin bagian kanan dari suatu elemen.
Hapus