Mengatur Nilai Rataan Item HTML Menggunakan alignSelf Style DOM

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:

Mendapatkan properti alignSelf: object.style.alignSelf
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.

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

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>

<button

onclick="changePos()">

Change alignSelf property

</button>

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

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>

<button

onclick="changePos()">

Change alignSelf property

</button>

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>

Sate

</div>

<div

id="item"

style="background-color:green;">

Padang

</div>

<div

style="background-color:white;">

Mahal

</div>

<button

onclick="changePos()">

Change alignSelf property

</button>

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

style="background-color:green;">

Rumah

</div>

Perawatan

</div>

<div

id="item"

style="background-color:green;">

Kingkong

</div>

<div

style="background-color:white;">

Premium

</div>

<button

onclick="changePos()">

Change alignSelf property

</button>

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

style="background-color:green;">

Rumah

</div>

Makan

</div>

<div id="item"

style="background-color:green;">

Minang

</div>

Sore

</div>

<button

onclick="changePos()">

Change alignSelf property

</button>

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

style="background-color:green;">

Jangan

</div>

Makan

</div>

<div id="item"

style="background-color:green;">

Menggunakan

</div>

Kaki

</div>

<button

onclick="changePos()">

Change alignSelf property

</button>

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

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>

<button

onclick="changePos()">

Change alignSelf property

</button>

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

style="background-color:green;">

Rumah

</div>

<div

style="background-color:white;">

Makan

</div>

<div

id="item"

style="background-color:green;">

Tegalan

</div>

Brebes

</div>

<button

onclick="changePos()">

Change alignSelf property

</button>

function changePos()

{

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

// Pengaturan alignSelf ke

// inherit

elem.style.alignSelf = 'inherit';

}

</script>

</body>

</html>

Baca Juga:

Dalam desain halaman web, pengaturan tampilan elemen-elemen di dalamnya sangat penting agar tampilannya terlihat rapi dan mudah dipahami. Salah satu cara untuk mengatur tampilan elemen dalam sebuah wadah adalah dengan menggunakan properti gaya. Salah satu properti gaya yang dapat digunakan untuk mengatur rataan elemen dalam sebuah kontainer adalah alignSelf. Properti ini dapat diakses dan diubah melalui gaya dokumen objek model atau DOM pada elemen HTML tertentu. Dengan menggunakan alignSelf, elemen-elemen di dalam wadah dapat diatur posisinya dengan lebih fleksibel, sesuai dengan kebutuhan desain.

Pada dasarnya, elemen-elemen HTML yang diatur dalam sebuah wadah sering kali mengikuti pola atau aturan tata letak tertentu yang sudah ditetapkan. Salah satu pola yang sering digunakan adalah model tata letak berbasis kolom atau baris, yang memanfaatkan fleksibilitas gaya untuk menentukan posisi elemen-elemen di dalam wadah tersebut. Salah satu cara untuk mengatur posisi elemen ini adalah dengan menggunakan properti alignSelf. Properti ini memberi fleksibilitas untuk mengubah posisi elemen secara mandiri tanpa harus mempengaruhi elemen lain di dalam wadah yang sama.

Properti alignSelf bekerja dalam konteks wadah yang memiliki pengaturan tata letak fleksibel atau grid. Tata letak fleksibel adalah suatu pendekatan dimana elemen-elemen di dalam wadah dapat disusun secara dinamis berdasarkan ruang yang tersedia, serta dapat saling menyesuaikan diri. Sementara itu, pengaturan grid lebih terstruktur dan mengatur elemen-elemen dalam bentuk baris dan kolom yang sudah ditetapkan. Dalam kedua tata letak ini, properti alignSelf memungkinkan pengaturan posisi vertikal elemen secara independen. Hal ini berarti elemen yang diatur dengan properti ini tidak terikat pada posisi elemen lainnya di dalam wadah, sehingga memberi fleksibilitas lebih besar pada desain halaman web.

Untuk memahami cara kerja properti alignSelf, perlu dipahami terlebih dahulu beberapa prinsip dasar tata letak fleksibel. Pada tata letak fleksibel, wadah dapat diatur untuk menampung elemen-elemen secara horizontal atau vertikal. Properti alignSelf dapat mengubah posisi elemen dalam sumbu vertikal di dalam wadah tersebut. Elemen yang terpengaruh oleh properti ini dapat bergerak ke atas, ke tengah, atau ke bawah, tergantung pada nilai yang diberikan pada properti tersebut.

Ketika properti alignSelf diterapkan pada sebuah elemen, nilai yang diberikan akan menentukan bagaimana elemen tersebut disejajarkan dengan elemen lainnya dalam wadah fleksibel atau grid. Nilai-nilai yang umum digunakan pada properti alignSelf termasuk auto, flex-start, flex-end, center, dan baseline. Nilai auto berarti elemen tersebut akan mengikuti aturan pengaturan dari wadah induknya, sementara nilai lainnya mengubah posisi elemen tersebut secara spesifik, seperti menempatkannya di bagian atas, bawah, tengah, atau sesuai dengan garis dasar elemen lainnya.

Salah satu keuntungan utama dari penggunaan alignSelf adalah kemampuan untuk mengatur posisi elemen secara independen tanpa harus mempengaruhi tata letak elemen lainnya. Hal ini sangat berguna ketika ada elemen-elemen tertentu dalam wadah yang perlu memiliki posisi yang berbeda dengan elemen-elemen lainnya. Sebagai contoh, pada sebuah wadah yang memuat beberapa elemen, mungkin ada elemen yang perlu diposisikan di bagian atas sementara elemen lainnya di bagian bawah. Dengan properti alignSelf, pengaturan ini dapat dilakukan dengan mudah tanpa harus merubah posisi elemen-elemen lain dalam wadah.

Selain itu, alignSelf juga mempermudah dalam menciptakan desain yang responsif. Dalam desain responsif, elemen-elemen dalam halaman web perlu menyesuaikan diri dengan ukuran layar perangkat yang digunakan. Properti ini memungkinkan elemen-elemen untuk tetap teratur dan rapi, terlepas dari perubahan ukuran wadah atau ruang yang tersedia. Ini sangat membantu dalam menciptakan tampilan yang konsisten di berbagai perangkat, dari perangkat seluler hingga layar desktop yang lebih besar.

Penggunaan alignSelf dapat sangat membantu dalam menyusun elemen-elemen halaman dengan cara yang lebih efisien dan fleksibel. Dengan memberi kontrol lebih besar atas posisi elemen secara vertikal, desainer dapat membuat tata letak yang lebih dinamis dan menarik. Ini memberikan kebebasan lebih dalam menciptakan desain halaman yang tidak hanya fungsional, tetapi juga estetis. Namun, seperti halnya dengan pengaturan gaya lainnya, penggunaan properti alignSelf harus dilakukan dengan hati-hati agar tidak mengganggu keteraturan keseluruhan desain halaman.

Sebagai tambahan, properti alignSelf hanya berlaku pada elemen-elemen yang ada dalam wadah dengan pengaturan gaya fleksibel atau grid. Oleh karena itu, sebelum menggunakan properti ini, penting untuk memastikan bahwa elemen-elemen yang dimaksud berada dalam wadah dengan salah satu dari kedua pengaturan tata letak tersebut. Penggunaan alignSelf pada elemen yang tidak berada dalam wadah fleksibel atau grid tidak akan memberikan hasil yang diinginkan. Dalam hal ini, elemen tersebut tidak akan terpengaruh oleh perubahan posisi yang ditentukan oleh properti ini.

Salah satu tantangan dalam menggunakan alignSelf adalah memastikan bahwa nilai yang diberikan sesuai dengan kebutuhan desain. Meskipun properti ini memberi fleksibilitas, penentuan nilai yang tepat untuk mencapai tampilan yang diinginkan dapat menjadi hal yang rumit. Terkadang, perubahan posisi elemen yang dilakukan dengan alignSelf bisa saling berbenturan dengan pengaturan tata letak lainnya, seperti pengaturan ukuran elemen atau jarak antar elemen. Oleh karena itu, penting untuk memahami keseluruhan struktur desain halaman agar penggunaan properti ini memberikan hasil yang optimal.

Kesimpulannya, alignSelf adalah properti gaya yang sangat berguna untuk mengatur posisi vertikal elemen dalam wadah fleksibel atau grid. Properti ini memberi kebebasan untuk mengatur posisi elemen secara mandiri, tanpa mempengaruhi elemen lainnya dalam wadah yang sama. Penggunaan alignSelf dapat membantu menciptakan desain yang lebih dinamis dan responsif, serta memberi kontrol lebih besar atas posisi elemen-elemen dalam halaman web. Dengan pemahaman yang tepat, properti ini dapat digunakan untuk menghasilkan tata letak yang lebih efisien, rapi, dan menarik secara visual.

Pemahaman yang lebih dalam tentang bagaimana properti alignSelf bekerja akan sangat bermanfaat bagi desainer dan pengembang web dalam menciptakan tata letak halaman yang lebih fleksibel dan dapat disesuaikan dengan berbagai ukuran layar. Saat desain halaman web mulai melibatkan lebih banyak elemen dinamis, penggunaan alignSelf menjadi semakin penting. Hal ini memungkinkan setiap elemen untuk diberi pengaturan posisi yang lebih tepat tanpa mengubah posisi elemen lainnya, menjadikan keseluruhan tata letak tetap konsisten dan efisien.

Penting untuk diingat bahwa tata letak fleksibel tidak hanya tentang mengatur posisi elemen-elemen dalam wadah secara vertikal, tetapi juga memastikan bahwa elemen-elemen tersebut tetap dapat beradaptasi dengan perubahan ukuran layar perangkat yang digunakan. Dalam konteks ini, penggunaan alignSelf bukan hanya memberi manfaat dalam hal estetika, tetapi juga dalam hal fungsionalitas. Desain halaman web yang responsif memungkinkan konten ditampilkan dengan cara yang optimal, tanpa memerlukan perubahan besar pada struktur elemen. Elemen-elemen dapat tetap terlihat rapi dan teratur meskipun ukuran layar atau ruang di dalam wadah berubah.

Selain itu, penggunaan alignSelf juga memungkinkan penataan elemen-elemen dalam sebuah wadah dengan lebih presisi. Hal ini memberi fleksibilitas tambahan ketika bekerja dengan berbagai jenis elemen dalam sebuah halaman, baik itu gambar, teks, tombol, atau elemen interaktif lainnya. Dalam sebuah wadah, beberapa elemen mungkin perlu diposisikan dengan cara yang berbeda tergantung pada fungsi dan peranannya dalam desain. Dengan alignSelf, pengaturan posisi setiap elemen dapat dilakukan dengan lebih mudah dan terarah, sehingga desain halaman web menjadi lebih efisien.

Namun, untuk memastikan bahwa penggunaan alignSelf memberikan hasil yang maksimal, sangat penting untuk memahami prinsip-prinsip dasar dari pengaturan tata letak fleksibel dan grid. Tata letak fleksibel memberikan banyak kebebasan dalam hal penataan elemen-elemen dalam wadah, namun juga memerlukan pemahaman yang baik tentang bagaimana elemen-elemen tersebut saling berinteraksi. Penggunaan alignSelf harus dilakukan dengan hati-hati, terutama jika elemen-elemen yang diletakkan dalam wadah tersebut memiliki sifat atau pengaturan yang saling mempengaruhi.

Salah satu cara untuk memastikan penggunaan alignSelf yang efektif adalah dengan merencanakan desain tata letak dengan matang. Mengidentifikasi elemen mana yang perlu diposisikan secara independen dan elemen mana yang dapat mengikuti pola yang sama akan membantu memaksimalkan penggunaan properti ini. Desain halaman yang baik tidak hanya memperhatikan posisi elemen-elemen dalam wadah, tetapi juga memastikan bahwa interaksi antara elemen-elemen tersebut menghasilkan pengalaman pengguna yang menyenangkan dan mudah dipahami.

Sebagai tambahan, meskipun alignSelf memberikan banyak keuntungan dalam hal fleksibilitas dan penataan, penting untuk tidak mengandalkan sepenuhnya pada properti ini dalam setiap situasi. Penggunaan properti ini haruslah disesuaikan dengan kebutuhan desain secara keseluruhan. Dalam beberapa kasus, pengaturan posisi elemen-elemen mungkin memerlukan pendekatan yang lebih kompleks, atau ada kebutuhan untuk menggunakan properti gaya lainnya yang dapat berfungsi bersama alignSelf untuk mencapai hasil yang lebih baik.

Dengan memahami prinsip-prinsip ini dan menggunakan alignSelf dengan bijak, desainer dan pengembang web dapat menciptakan halaman yang tidak hanya terlihat baik, tetapi juga berfungsi dengan baik pada berbagai perangkat. Pengaturan posisi elemen secara mandiri memberi kebebasan dan fleksibilitas yang sangat dibutuhkan dalam desain halaman web modern, memungkinkan elemen-elemen untuk disusun dengan cara yang optimal untuk kebutuhan pengguna.

Referensi Tambahan:

Artikel ini akan dibaca oleh: 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"

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
AnonimSelasa, 19 April 2022 pukul 08.49.00 WIB
Apa fungsi dari properti alignSelf Style DOM pada HTML?
BalasHapus
Balasan

Tambahkan komentar

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 -

E-SISTEM:	Bahasa Pemrograman:
open_in_newE-RAPORT open_in_newE-PERPUS open_in_newE-LITERASI open_in_newE-KONSELING	open_in_newBahasa HTML open_in_newBahasa C open_in_newBahasa Java open_in_newBahasa C++
Materi Penelitian:	Administrasi Siswa:
open_in_newKlasifikasi Penelitian open_in_newPenelitian Tindakan Kelas open_in_newStatistika Penelitian open_in_newContoh Skripsi	open_in_newNilai dan Arsip open_in_newPerbaikan Data open_in_newKatalog Siswa open_in_newBuku Digital
Referensi Umum:	Magic
open_in_newMapel Informatika open_in_newLogo Instansi dan Organisasi open_in_newArtikel open_in_newTools dan Game	Mystery Box

PENELITIAN.ID

Mengatur Nilai Rataan Item HTML Menggunakan alignSelf Style DOM

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

Menu Halaman Statis