8 Contoh Penggunaan Properti alignSelf Style DOM pada HTML

Properti Style alignSelf DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mengembalikan nilai rataan untuk sebuah item yang diseleksi di dalam sebuah container fleksibel.

Sintak:
  • untuk mendapatkan properti alignSelf: object.style.alignSelf
  • untuk mengatur properti alignSelf: object.style.alignSelf = "auto | stretch | center | flex-start | flex-end | baseline | initial | inherit"

Property Value:
  • auto: elemen menerima turunan dari container properti parent 'align-items' atau mengaturnya ke tipe 'stretch' jika tidak terdapat container parent apapun, yang merupakan nilai default dari properti alignSelf itu sendiri.
  • stretch: digunakan untuk melakukan stretch ke item supaya bersesuaian dengan container.
  • center: digunakan untuk memposisikan item ke posisi center atau tengah dalam suatu container.
  • flex-start: digunakan untuk memposisikan item menuju bagian awal dari container.
  • flex-end: digunakan untuk memposisikan item pada bagian akhir dari suatu container.
  • baseline: digunakan untuk memposisikan item pada bagian baris dasar dari suatu container.
  • initial: digunakan untuk mengatur properti alignSelf ke tipe default-nya.
  • inherit: berfungsi untuk menerima turunan properti yang berasal dari parent.

Return Value: berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan properti align-self dari suatu elemen.

Contoh: penggunaan nilai auto.

<!DOCTYPE html>

<html 

lang="en">

 

<head>

 

<title>

Properti DOM Style alignSelf

</title>

 

<style>

.main 

{

width: 200px;

height: 150px;

border: solid;

display: flex;

align-items: center;}

 

#item 

{

/* pengaturan align-self keti 

tipe flex-end untuk 

mengobservasi dampak dari 

penggunaan nilai auto */

align-self: flex-end;}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style alignSelf

</b>

 

<p>

Klik tombol untuk mengubah 

properti alignSelf ke 'auto'.

</p>

 

<div class="main">

 

<div 

style="background-color:green;">

Rumah 

</div>

 

<div 

style="background-color:white;">

Makan 

</div>


<div 

id="item" style="background-color:green;">

Padang 

</div>

 

<div 

style="background-color:white;">

Murah 

</div>

 

</div>

 

<button 

onclick="changePos()">

Change alignSelf property

</button>

 

<script>

function changePos() 

{

elem = document.querySelector('#item');

// Pengaturan alignSelf ke 

// auto

elem.style.alignSelf = 'auto';

}

</script>

 

</body>

 

</html>


Contoh: penggunaan nilai stretch.

<!DOCTYPE html>

<html 

lang="en">

 

<head>

 

<title>

Properti DOM Style alignSelf

</title>

 

<style>

.main 

{

width: 200px;

height: 150px;

border: solid;

display: flex;

/* Mengatur align-items ke 

tipe center untuk 

mengobservasi dampak 

penggunaan nilai strench */

align-items: center;}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style alignSelf

</b>

 

<p>

Klik tombol untuk mengubah 

properti alignSelf ke 

'stretch'.

</p>

 

<div class="main">

 

<div 

style="background-color:green;">

Rumah 

</div>

 

<div 

style="background-color:white;">

Makan 

</div>

 

<div 

id="item"

style="background-color:green;">

Padang 

</div>

 

<div 

style="background-color:white;">

Murah 

</div>

 

</div>

 

<button 

onclick="changePos()">

Change alignSelf property

</button>

 

<script>

function changePos() 

{

elem = document.querySelector('#item');

// Pengaturan alignSelf ke 

// stretch

elem.style.alignSelf = 'stretch';

}

</script>

 

</body>

 

</html>


Contoh: penggunaan nilai center.

<!DOCTYPE html>

<html 

lang="en">

 

<head>

 

<title>

Properti DOM Style alignSelf

</title>

 

<style>

.main 

{

width: 200px;

height: 150px;

border: solid;

display: flex;

/* Mengatur align-items ke 

tipe center untuk 

mengobservasi dampak dari 

penggunaan nilai center. */

align-items: stretch;}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style alignSelf

</b>

 

<p>

Klik tombol untuk mengubah 

properti alignSelf ke tipe 

'center'.

</p>

 

<div 

class="main">

 

<div 

style="background-color:green;">

Warung 

</div>

 

<div style="background-color:white;">

Sate 

</div>

 

<div 

id="item"

style="background-color:green;">

Padang 

</div>

 

<div 

style="background-color:white;">

Mahal 

</div>

 

</div>

 

<button 

onclick="changePos()">

Change alignSelf property

</button>

 

<script>

function changePos() 

{

elem = document.querySelector('#item');

// Pengaturan alignSelf ke 

// center

elem.style.alignSelf = 'center';

}

</script>

 

</body>

 

</html>


Contoh: penggunaan nilai flex-start.

<!DOCTYPE html>

<html 

lang="en">

 

<head>

 

<title>

Properti DOM Style alignSelf

</title>

 

<style>

.main 

{

width: 200px;

height: 150px;

border: solid;

display: flex;}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style alignSelf

</b>

 

<p>

Klik tombol untuk mengubah 

properti alignSelf ke 

'flex-start'.

</p>

 

<div class="main">

 

<div 

style="background-color:green;">

Rumah 

</div>

 

<div style="background-color:white;">

Perawatan 

</div>

 

<div 

id="item"

style="background-color:green;">

Kingkong 

</div>

 

<div 

style="background-color:white;">

Premium 

</div>

 

</div>

 

<button 

onclick="changePos()">

Change alignSelf property

</button>

 

<script>

function changePos() 

{

elem = document.querySelector('#item');

// Pengaturan alignSelf ke 

// flex-start

elem.style.alignSelf = 'flex-start';

}

</script>

 

</body>

 

</html>


Contoh: penggunaan nilai flex-end.

<!DOCTYPE html>

<html 

lang="en">

 

<head>

 

<title>

Properti DOM Style alignSelf

</title>

 

<style>

.main 

{

width: 200px;

height: 150px;

border: solid;

display: flex;}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style alignSelf

</b>

 

<p>

Klik tombol untuk mengubah 

properti alignSelf ke 

'flex-end'.

</p>

 

<div class="main">

 

<div 

style="background-color:green;">

Rumah 

</div>

 

<div style="background-color:white;">

Makan 

</div>

 

<div id="item"

style="background-color:green;">

Minang 

</div>

 

<div style="background-color:white;">

Sore 

</div>

 

</div>

 

<button 

onclick="changePos()">

Change alignSelf property

</button>

 

<script>

function changePos()

{

elem = document.querySelector('#item');

// Pengaturan alignSelf ke 

// flex-end

elem.style.alignSelf = 'flex-end';

}

</script>

 

</body>

 

</html>


Contoh: penggunaan nilai baseline.

<!DOCTYPE html>

<html 

lang="en">

 

<head>

 

<title>

Properti DOM Style alignSelf

</title>

 

<style>

.main 

{

width: 200px;

height: 150px;

border: solid;

display: flex;}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style alignSelf

</b>

 

<p>

Klik tombol untuk mengubah 

properti alignSelf ke 

'baseline'.

</p>

 

<div class="main">

 

<div 

style="background-color:green;">

Jangan 

</div>

 

<div style="background-color:white;">

Makan 

</div>

 

<div id="item"

style="background-color:green;">

Menggunakan 

</div>

 

<div style="background-color:white;">

Kaki 

</div>

 

</div>

 

<button 

onclick="changePos()">

Change alignSelf property

</button>

 

<script>

function changePos() 

{

elem = document.querySelector('#item');

// Pengaturan alignSelf ke 

// baseline

elem.style.alignSelf = 'baseline';

}

</script>

 

</body>

 

</html>


Contoh: penggunaan nilai initial.

<!DOCTYPE html>

<html 

lang="en">

 

<head>

 

<title>

Properti DOM Style alignSelf

</title>

 

<style>

.main 

{

width: 200px;

height: 150px;

border: solid;

display: flex;

align-items: center;}

 

#item 

{

/* Pengaturan align-self ke 

tipe flex-end untuk 

mengobservasi dampak 

penggunaan nilai initial. */

align-self: flex-end;}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style alignSelf

</b>

 

<p>

Klik tombol untuk mengubah 

properti alignSelf ke 

'initial'.

</p>

 

<div class="main">

 

<div 

style="background-color:green;">

Rumah 

</div>

 

<div 

style="background-color:white;">

Makan 

</div>

 

<div 

id="item"

style="background-color:green;">

Pegagan 

</div>

 

<div 

style="background-color:white;">

Indah 

</div>

 

</div>

 

<button 

onclick="changePos()">

Change alignSelf property

</button>

 

<script>

function changePos() 

{

elem = document.querySelector('#item');

// Pengaturan alignSelf ke 

// initial

elem.style.alignSelf = 'initial';

}

</script>

 

</body>

 

</html>


Contoh: penggunaan nilai inherit.

<!DOCTYPE html>

<html 

lang="en">

 

<head>

 

<title>

Properti DOM Style alignSelf

</title>

 

<style>

.main 

{

width: 200px;

height: 150px;

border: solid;

display: flex;

/* merupakan parent dari item */

align-items: center;}

 

#item 

{

/* Pengaturan align-self ke 

flex-end untuk mengobservasi 

dampak penggunaan nilai 

inherit. */

align-self: flex-end;}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti DOM Style alignSelf

</b>

 

<p>

Klik tombol untk mengubah 

properti alignSelf ke 

'inherit'.

</p>

 

<div id="parent">

 

<div class="main">

 

<div 

style="background-color:green;">

Rumah 

</div>

 

<div 

style="background-color:white;">

Makan 

</div>

 

<div 

id="item"

style="background-color:green;">

Tegalan 

</div>

 

<div style="background-color:white;">

Brebes 

</div>

 

</div>

 

</div>

 

<button 

onclick="changePos()">

Change alignSelf property

</button>

 

<script>

function changePos() 

{

elem = document.querySelector('#item');

// Pengaturan alignSelf ke 

// inherit

elem.style.alignSelf = 'inherit';

}

</script>

 

</body>

 

</html>

Komentar

  1. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti alignSelf Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti alignSelf Style DOM pada HTML:
      1. Google Chrome 21.0
      2. Internet Explorer 11.0
      3. Firefox 20.0
      4. Opera 12.1
      5. Safari 7.0

      Hapus
  2. Apa fungsi dari properti alignSelf Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti alignSelf Style DOM pada HTML digunakan untuk menentukan perataan untuk item yang dipilih di dalam container flexible.

      Hapus
    2. Properti align-self Style DOM pada HTML digunakan untuk menentukan nilai perataan pada item yang telah dipilih di dalam flexible container.

      Catatan: properti align-self dapat digunakan untuk menggantikan properti align-items container yang sifatnya flexible.

      Hapus

Posting Komentar

*Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung. :D

*Jika terdapat typo, link bermasalah, dan lain sebagainya, pengunjung dapat melaporkan permasalahan tersebut melalui WA: +62-896-2514-6106




~ Ikatlah Ilmu dengan Memostingkannya ~

Referensi Tambahan:

Enkapsulasi pada Java

2 Jenis Utama Kegiatan Penelitian Berdasarkan Waktunya, Crosssectional Salah Satunya

6 Contoh Program Method Overloading pada Java

3 Jenis Utama Looping pada Java

Perbedaan stdio.h dan stdlib.h pada Bahasa C