Melakukan Pembersihan Efek HTML Menggunakan Clear Style DOM

Properti Style clear DOM pada HTML digunakan untuk mengatur atau mendapatkan nilai posisi dari elemen relatif spesifik ke floating object pada dokumen HTML.

Sebelum memahami lebih dalam materi tentang Melakukan Pembersihan Efek HTML Menggunakan Clear Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Posisi Caption HTML Menggunakan captionSide Style DOM, Mengatur Kotak Ukuran HTML Menggunakan boxSizing Style DOM, dan Mengatur Bayangan Kotak HTML Menggunakan boxShadow Style DOM.

Sintak:

Mendapatkan nilai properti clear: object.style.clear
Mengatur nilai properti clear: object.style.clear = "none|left|right|both|initial|inherit"

Properties Value:

left: Membatasi floating entitas dari sisi kiri elemen.
right: Membatasi floating entitas dari sisi kanan elemen.
both: Membatasi floating entitas dari sisi kiri atau sisi kanan elemen.
none: Memberikan ijin akses floating intitas dari sisi kiri dan sisi kanan elemen, yang sekaligus merupakan nilai default dari properti Style clear.
initial: Mengatur nilai properti clear ke nilai default-nya.
inherit: Menerima nilai turunan dari properti clear atau mengatur nilai properti sehingga sama dengan nilai parent-nya.

Return Values: Berfungsi untuk mengembalikan sebuah string yang merepresentasikan posisi dari elemen relatif ke floating object.

Contoh:

<!DOCTYPE html>

<html>

<head>

<title>

Properti Style clear DOM

</title>

<style>

img

{

float: left;

}

</style>

</head>

<body>

<img

src=

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyizkhCmvzS6vbSN5BKe5vmhs_cFakFxB8u_E3U3_OXNRz-QJy4CemqcTyPrvzfOofiws4FHtSerLDrlYP6ygRUH4rpC3dtrozkB9Dz-_5cQIuYGT3KaiF4YRD8zcz2u92zmlOZRMfNlVBTylRfL-TMTFlvrd5wCxJvm3FXsIulLr40WStkBfdMO3d/s800/blogmapel.webp"

width="150"

height="150">

id="P"

style="color:green">

MAKANNASIPADANG DISINI MURAH

</p>

<button

type="button"

onclick="myFunction()">

Clear sisi kiri teks

</button>

function myFunction()

{

document.getElementById(

"P").style.clear = "left";

}

</script>

</body>

</html>

Output:

MAKANNASIPADANG DISINI MURAH MAKANNASIPADANG DISINI MURAH MAKANNASIPADANG DISINI MURAH MAKANNASIPADANG DISINI MURAH MAKANNASIPADANG DISINI MURAH MAKANNASIPADANG DISINI MURAH MAKANNASIPADANG DISINI MURAH MAKANNASIPADANG DISINI MURAH MAKANNASIPADANG DISINI MURAH

Contoh:

<!DOCTYPE html>

<html>

<head>

<title>

Properti Style clear DOM

</title>

<style>

img

{

float: right;

}

</style>

</head>

<body>

<img

src=

width="150"

height="150">

id="P"

style="color:green">

MAKANNASIPADANG DISINI MURAH

</p>

<button

type="button"

onclick="myFunction()">

Clear Sisi Kanan Teks

</button>

function myFunction()

{

document.getElementById(

"P").style.clear = "right";

}

</script>

</body>

</html>

Output:

Contoh:

<!DOCTYPE html>

<html>

<head>

<title>

Properti Style clear DOM

</title>

<style>

img

{

float: right;

}

{

float: left;

}

</style>

</head>

<body>

<img src=

width="150"

height="150">

<img

id="i"

src=

width="150"

height="150">

id="P"

style="color:green">

MAKANNASIPADANG DISINI MURAH

</p>

<button

type="button"

onclick="myFunction()">

Clear sisi kiri dan sisikanan

teks

</button>

function myFunction()

{

document.getElementById(

"P").style.clear = "both";

}

</script>

</body>

</html>

Output:

MAKANNASIPADANG DISINI MURAH MAKANNASIPADANG DISINI MURAH

Pembersihan efek dalam elemen halaman HTML sering kali diperlukan untuk mengatur tampilan dan posisi elemen-elemen tersebut secara rapi. Proses ini dapat dilakukan menggunakan properti gaya DOM (Model Objek Dokumen) bernama "clear." Penggunaan properti ini memungkinkan elemen-elemen dalam halaman web untuk tidak terpengaruh oleh elemen lain yang berada di sekitarnya. Properti "clear" mempengaruhi pengaturan aliran elemen di halaman web, memungkinkan pengguna untuk menata tampilan dengan lebih presisi dan menghindari tumpang tindih antara elemen-elemen yang satu dengan yang lainnya.

Secara umum, efek yang dihasilkan oleh pengaturan properti ini berkaitan dengan pengaturan tata letak elemen-elemen di dalam sebuah kontainer. Sering kali, elemen-elemen yang memiliki pengaturan gaya float akan menyebabkan elemen-elemen lain di sekitar menjadi terpengaruh. Ini menyebabkan masalah seperti tumpang tindih atau posisi yang tidak teratur. Properti "clear" hadir untuk menangani masalah ini dengan membersihkan efek yang disebabkan oleh elemen-elemen yang menggunakan gaya float.

Properti "clear" bekerja dengan cara mengatur elemen-elemen agar tidak berada di samping elemen lain yang menggunakan gaya float. Dengan kata lain, elemen yang diberi properti "clear" akan diposisikan di bawah elemen-elemen tersebut. Hal ini sangat berguna dalam berbagai situasi, terutama ketika elemen-elemen dalam halaman web saling berdekatan dan pengaturan tata letaknya harus diperhatikan dengan cermat.

Baca Juga:

Penting untuk memahami bahwa penggunaan properti "clear" tidak mempengaruhi elemen-elemen yang terletak di atas elemen yang diberi properti tersebut. Sebaliknya, properti ini hanya mempengaruhi aliran elemen-elemen yang ada di sekitarnya. Sebagai contoh, ketika sebuah elemen yang menggunakan gaya float diletakkan di sebelah kiri atau kanan elemen lainnya, elemen yang menggunakan properti "clear" akan mencegah elemen lain untuk berada di sebelahnya dan akan menempatkan elemen tersebut di bawah elemen pertama.

Properti "clear" juga dapat digunakan untuk mengatasi masalah tata letak dalam struktur kolom pada halaman web. Ketika sebuah halaman memiliki beberapa kolom yang menggunakan gaya float untuk mengatur posisi elemen-elemen dalam kolom-kolom tersebut, sering kali terjadi elemen yang berada di bawah kolom pertama akan terlihat melayang atau tidak berada di posisi yang diinginkan. Properti "clear" dapat digunakan untuk memastikan elemen-elemen tersebut tidak saling bertumpukan dan diletakkan di bawah kolom-kolom tersebut sesuai dengan urutan yang benar.

Selain itu, penggunaan properti "clear" sangat penting ketika sebuah halaman web menggunakan berbagai macam elemen berbentuk blok atau kolom. Elemen-elemen ini sering kali mempengaruhi aliran elemen-elemen lain dalam halaman web, terutama jika ada elemen-elemen yang terpengaruh oleh pengaturan gaya float. Untuk menghindari tampilan yang kacau, penggunaan "clear" dapat membantu memastikan bahwa setiap elemen berada di tempat yang diinginkan, tanpa ada gangguan dari elemen-elemen lain di sekitarnya.

Penting juga untuk dicatat bahwa properti "clear" dapat memiliki nilai yang berbeda tergantung pada kebutuhan tata letak. Nilai "left," "right," dan "both" merupakan nilai-nilai yang dapat digunakan untuk mengatur pembersihan efek gaya float. Nilai "left" akan membersihkan elemen-elemen yang terletak di sebelah kiri, sedangkan nilai "right" akan membersihkan elemen-elemen yang terletak di sebelah kanan. Sementara itu, nilai "both" akan membersihkan elemen-elemen di kedua sisi elemen yang diberi properti tersebut.

Selain pengaturan posisi elemen-elemen di dalam kontainer, properti "clear" juga berfungsi untuk menjaga keteraturan dalam tampilan halaman web. Terutama ketika ada banyak elemen dengan gaya float yang tumpang tindih, penggunaan properti "clear" akan menjaga agar elemen-elemen yang menggunakan gaya tersebut tidak saling mengganggu, sehingga tampilan tetap teratur dan rapi.

Penggunaan properti "clear" dalam pengaturan gaya elemen-elemen di halaman web juga dapat berfungsi untuk mencegah elemen-elemen lain agar tidak tumpang tindih dengan elemen yang memiliki gaya float. Dalam hal ini, penggunaan "clear" memberikan kebebasan bagi elemen untuk memposisikan diri tanpa khawatir akan terpengaruh oleh elemen-elemen yang ada di sekitar.

Tata letak halaman web yang bersih dan teratur sangat bergantung pada kemampuan untuk mengatur aliran elemen-elemen dalam halaman tersebut. Properti "clear" memainkan peran yang sangat penting dalam menjaga keselarasan tata letak elemen-elemen tersebut, terutama ketika berbagai elemen menggunakan gaya float untuk mengatur posisinya. Dengan menggunakan properti ini, pengguna dapat memastikan bahwa elemen-elemen dalam halaman web tidak saling menghalangi atau menyebabkan tampilan yang tidak sesuai dengan keinginan.

Penting untuk dicatat bahwa penggunaan properti "clear" harus dilakukan dengan bijak. Pengaturan yang salah atau tidak tepat dapat menyebabkan elemen-elemen dalam halaman web menjadi tidak sesuai dengan tata letak yang diinginkan. Oleh karena itu, sebelum menggunakan properti ini, pastikan untuk memahami bagaimana elemen-elemen dalam halaman web saling berinteraksi satu sama lain. Dengan cara ini, properti "clear" dapat digunakan dengan efektif untuk mencapai tata letak yang diinginkan.

Dalam prakteknya, penggunaan properti "clear" memberikan solusi yang efektif untuk mengatasi masalah pengaturan aliran elemen-elemen yang terpengaruh oleh gaya float. Properti ini tidak hanya memberikan kontrol lebih besar terhadap tampilan dan posisi elemen, tetapi juga menjaga agar tampilan halaman web tetap bersih dan teratur. Dengan memahami penggunaan yang tepat, pengguna dapat memaksimalkan potensi tata letak halaman web dan menciptakan pengalaman yang lebih baik bagi pengunjungnya.

Secara keseluruhan, penggunaan properti "clear" merupakan salah satu langkah penting dalam proses pembersihan efek pada halaman web yang menggunakan gaya float. Hal ini membantu dalam memastikan bahwa elemen-elemen dalam halaman web diletakkan dengan benar dan tidak saling mengganggu satu sama lain. Dengan begitu, halaman web akan memiliki tampilan yang lebih rapi, teratur, dan mudah dinavigasi. Properti ini memberikan kontrol yang lebih besar bagi pengembang web dalam menciptakan tata letak yang sesuai dengan desain yang diinginkan, sekaligus menjaga agar aliran elemen-elemen dalam halaman tetap terjaga dengan baik.

Untuk memahami lebih dalam tentang bagaimana penggunaan properti "clear" dalam pengaturan tata letak elemen di halaman web dapat mempengaruhi keseluruhan desain, penting untuk mempertimbangkan interaksi antar elemen-elemen dalam konteks tampilan dan posisi. Di dunia pengembangan halaman web, sering kali elemen-elemen seperti gambar, teks, dan kontainer diberi gaya float untuk menata elemen-elemen tersebut di dalam sebuah halaman. Hal ini memungkinkan elemen-elemen tersebut untuk mengapung di sisi kiri atau kanan halaman, memberi kebebasan dalam mengatur tata letak konten. Namun, tanpa pengaturan yang tepat, penggunaan gaya float bisa menyebabkan masalah seperti elemen-elemen yang bertumpuk atau mengalir keluar dari batas yang diinginkan.

Penggunaan properti "clear" sangat efektif untuk mengatasi masalah-masalah tersebut. Ketika sebuah elemen diberi pengaturan gaya float, elemen-elemen yang terletak setelahnya dapat terpengaruh, berusaha untuk berada di sebelah elemen yang mengapung tersebut. Properti "clear" memungkinkan pengembang untuk menempatkan elemen di bawah elemen yang menggunakan gaya float, memastikan tidak ada elemen yang saling tumpang tindih atau terhalang satu sama lain. Dalam hal ini, "clear" berfungsi sebagai pembersih efek gaya float yang dapat mengganggu tata letak dan aliran elemen di halaman.

Penggunaan "clear" sangat berguna dalam desain halaman yang kompleks, dimana banyak elemen dengan pengaturan gaya float berinteraksi satu sama lain. Pada halaman dengan berbagai kolom, misalnya, pengaturan gaya float sering digunakan untuk membuat kolom-kolom bersebelahan. Namun, tanpa pengaturan "clear" yang tepat, elemen-elemen yang berada setelah kolom pertama bisa berusaha untuk berada di samping kolom tersebut, menyebabkan tumpang tindih atau ketidakteraturan dalam tata letak halaman. Dengan mengatur elemen-elemen ini menggunakan "clear," dapat dipastikan bahwa elemen-elemen tersebut akan ditempatkan di bawah kolom yang menggunakan gaya float, menciptakan tata letak yang lebih terstruktur dan mudah dibaca.

Penting untuk dicatat bahwa meskipun properti "clear" dapat digunakan untuk mengatasi banyak masalah tata letak yang disebabkan oleh gaya float, penggunaan properti ini harus disesuaikan dengan kebutuhan halaman. Dalam beberapa kasus, properti ini mungkin tidak diperlukan sama sekali jika tata letak tidak melibatkan elemen-elemen dengan gaya float. Namun, jika tata letak tersebut memerlukan pengaturan gaya float untuk mengatur elemen-elemen secara paralel atau bersebelahan, properti "clear" akan menjadi alat yang sangat berguna untuk menghindari kesalahan dalam penataan elemen-elemen tersebut.

Secara teknis, properti "clear" diterapkan pada elemen setelah elemen dengan gaya float, dan dengan demikian, memengaruhi pengaturan aliran elemen tersebut dalam halaman web. Properti ini digunakan untuk memastikan bahwa elemen-elemen yang diberi pengaturan gaya float tidak menyebabkan gangguan pada elemen-elemen lainnya, memberikan lebih banyak kebebasan dalam pengaturan tata letak. Dalam praktiknya, nilai-nilai yang digunakan untuk properti "clear" dapat disesuaikan dengan cara mempengaruhi elemen-elemen di sekitar elemen yang diberi pengaturan "clear." Nilai "left" memastikan pembersihan terhadap elemen-elemen yang berada di kiri, nilai "right" mengatur pembersihan terhadap elemen-elemen yang berada di kanan, dan nilai "both" memberikan pembersihan terhadap elemen-elemen di kedua sisi.

Meskipun begitu, penting juga untuk memahami bahwa penggunaan properti "clear" dalam pengaturan tata letak tidak boleh dilakukan secara sembarangan. Pengaturan yang tidak tepat atau berlebihan dapat mempengaruhi aliran elemen-elemen dalam halaman web dengan cara yang tidak diinginkan. Hal ini dapat menyebabkan ketidaksesuaian dalam tata letak dan menurunkan kualitas desain halaman web. Oleh karena itu, penggunaan properti ini harus dilakukan dengan pertimbangan yang matang terhadap struktur dan desain keseluruhan halaman web.

Selain itu, properti "clear" juga dapat memberikan keuntungan dalam pengaturan elemen-elemen dalam struktur halaman yang melibatkan lebih dari satu kolom. Kolom-kolom ini mungkin terdiri dari berbagai elemen dengan pengaturan gaya float yang berbeda, dan penggunaan properti "clear" membantu memastikan bahwa kolom-kolom tersebut tidak saling tumpang tindih. Misalnya, ketika elemen-elemen dalam kolom pertama menggunakan gaya float untuk mengapung ke kiri atau kanan, elemen-elemen berikutnya dapat diposisikan dengan lebih tepat menggunakan pengaturan "clear," sehingga akan ditempatkan di bawah kolom tersebut dan tidak akan menabrak kolom yang ada di sekitarnya.

Dalam desain web modern, pengaturan tata letak yang responsif dan terstruktur dengan baik sangat penting untuk memberikan pengalaman pengguna yang memuaskan. Properti "clear" memungkinkan pengembang untuk memiliki kontrol lebih besar terhadap elemen-elemen dalam halaman, memastikan bahwa semua elemen tersebut disusun dengan cara yang rapi dan tidak saling mengganggu. Hal ini sangat berguna dalam memastikan tampilan halaman yang bersih, mudah dibaca, dan memberikan pengalaman yang nyaman bagi pengunjung.

Selain itu, penggunaan properti "clear" juga memberikan fleksibilitas dalam mengatur desain halaman web. Dalam berbagai situasi, properti ini memungkinkan elemen-elemen untuk tetap berada pada posisi yang diinginkan tanpa terpengaruh oleh elemen-elemen lain di sekitarnya. Dengan kata lain, properti "clear" memberikan kebebasan dalam mengatur elemen-elemen tersebut secara lebih terkontrol, sehingga pengaturan tata letak halaman web dapat lebih dipersonalisasi sesuai dengan kebutuhan desain dan fungsionalitas yang diinginkan.

Secara keseluruhan, penggunaan properti "clear" dalam pengaturan gaya DOM sangat penting untuk menciptakan tata letak halaman web yang lebih terstruktur, terorganisir, dan bersih. Properti ini memberikan solusi efektif untuk mengatasi masalah yang disebabkan oleh pengaturan gaya float dan memungkinkan pengembang untuk memastikan elemen-elemen di halaman web tidak saling mengganggu. Dengan memahami cara yang tepat dalam menggunakan properti "clear," halaman web dapat dipastikan memiliki tampilan yang rapi dan nyaman dilihat, meningkatkan kualitas desain dan pengalaman pengguna secara keseluruhan. Properti ini membantu menjaga agar elemen-elemen dalam halaman tidak saling tumpang tindih, serta memberikan pengaturan yang lebih fleksibel dalam menyusun konten halaman sesuai dengan tujuan dan desain yang diinginkan.

Referensi Tambahan:

Artikel ini akan dibaca oleh: Nabila Astri Ariyana, Nadia Rizki Rahmadani, Nicholas Valentino Febrianto, Noventi Siti Nur Aisa Putri, dan Novita Ayu Damayanti.

Location: Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Melakukan Pembersihan Efek HTML Menggunakan Clear Style DOM"

AnonimSenin, 20 Juni 2022 pukul 08.22.00 WIB
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti clear Style DOM pada HTML?
BalasHapus
Balasan
AnonimSenin, 27 Juni 2022 pukul 07.47.00 WIB
Apa yang dimaksud dengan properti clear 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

Melakukan Pembersihan Efek HTML Menggunakan Clear Style DOM

5 komentar untuk "Melakukan Pembersihan Efek HTML Menggunakan Clear Style DOM"

Menu Halaman Statis