Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Mengatur Nilai Rataan Item HTML Menggunakan alignSelf Style DOM

Dipublikasikan Oleh: elfanmauludi 5 komentar
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.


Sebelum memahami lebih dalam materi tentang Mengatur Nilai Rataan Item HTML Menggunakan alignSelf Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Item Rataan HTML Menggunakan alignItems Style DOM, Menentukan Nilai Rataan Teks HTML alignContent Style DOM, dan Memeriksa Nilai Lebar HTML Menggunakan Width Screen.

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 Values:
  • 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 Values: berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan properti align-self dari suatu elemen.

Baca Juga:

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>


Artikel ini didedikasikan kepada: Da'Ani Zulfa Nisfatullaili, Denny Wahyu Pramudya, Deo Budhi Anggitlistio, Devi Anggraeni Kuastutik, dan Devi Saputri.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Mengatur Nilai Rataan Item HTML Menggunakan alignSelf Style DOM"

  1. AnonimJumat, 08 April 2022 pukul 13.03.00 WIB

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

    BalasHapus
    Balasan
    1. AnonimJumat, 08 April 2022 pukul 13.04.00 WIB

      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. AnonimSelasa, 19 April 2022 pukul 08.49.00 WIB

    Apa fungsi dari properti alignSelf Style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimSelasa, 19 April 2022 pukul 08.49.00 WIB

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

      Hapus
    2. AnonimSelasa, 19 April 2022 pukul 08.51.00 WIB

      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

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 -