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

Mengatur Gaya Garis Luar HTML Menggunakan outlineStyle DOM

Dipublikasikan Oleh: elfanmauludi 5 komentar
Properti Style outlineStyle DOM pada HTML digunakan untuk mengatur atau mengembalikan style dari outline sekitar elemen.

Sebelum memahami lebih dalam materi tentang Mengatur Gaya Garis Luar HTML Menggunakan outlineStyle DOM, terlebih dahulu pelajari materi tentang: outlineOffset Style HTML DOM dan Fungsinya, Mengatur Warna Garis Luar HTML Menggunakan outlineColor Style DOM, dan Mengatur Garis Luar HTML Menggunakan Outline Style DOM.

Sintak:
  • Digunakan untuk mengembalikan nilai properti outlineStyle: object.style.outlineStyle
  • Digunakan untuk mengatur properti outlineStyle: object.style.outlineStyle = value:

Property Values:
  • none: Merupakan nilai default yang digunakan untuk mengatur tidak menampilkan outline.
  • hidden: Digunakan untuk turned off nilai outline.
  • dotted: Digunakan untuk mengatur nilai properti menjadi outline dotted.
  • dashed: Digunakan untuk mengatur nilai properti menjadi outline dashed.
  • solid: Digunakan untuk mengatur nilai properti menjadi outline solid.
  • double: Digunakan untuk mengatur nilai properti menjadi outline double.
  • groove: Digunakan untuk mengatur nilai properti menjadi outline 3D grooved.
  • ridge: Digunakan untuk mengatur nilai properti menjadi outline 3D ridged.
  • inset: Digunakan untuk mengatur nilai properti menjadi outline 3D inset.
  • outset: Digunakan untuk mengatur nilai properti menjadi outline 3D outset.
  • initial: Digunakan untuk mengatur nilai properti outline pada browser menjadi nilai default-nya.
  • inherit: Digunakan untuk mengatur nilai properti outline menjadi nilai value dari elemen parent.

Return Value: Method ini digunakan untuk mengembalikan nilai sebuah string yang merepresentasikan style dari elemen outline.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style outlineStyle 

DOM HTML

</title>

 

<style>

#myDiv 

{

border: 1px solid red;

outline: green dotted thick;

}

</style>

 

</head>

 

<body>

 

<h1>

Blog Elfan

</h1>

 

<h2>

Properti Style outlineStyle 

DOM HTML

</h2>

 

<div 

id="myDiv">

Selamat datang di Indomaret.

</div>

 

<br>

 

<button 

type="button" 

onclick="myFunction()">

Click Here!

</button>

 

<script>

function myFunction() 

{

document.getElementById("myDiv")

.style.outlineStyle = "solid";

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style outlineStyle DOM HTML

Selamat datang di Indomaret.



Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style outlineStyle 

DOM HTML

</title>

 

<style>

#myDiv 

{

border: 1px solid red;

}

</style>

 

</head>

 

<body>

 

<h1>

Properti Style outlineStyle 

DOM HTML

</h1>

 

<div 

id="myDiv">

Selamat datang di Indomaret.

</div>

 

<br>

 

<button 

type="button" 

onclick="myFunction()">

Click Here!

</button>

 

<script>

function myFunction() 

{

document.getElementById("myDiv")

.style.outlineStyle = "dotted";

}

</script>

 

</body>

 

</html>

Output:

Properti Style outlineStyle DOM HTML

Selamat datang di Indomaret.



HTML, atau bahasa penandaan, memiliki berbagai macam cara untuk menyusun dan memperindah tampilan elemen-elemen dalam halaman web. Salah satu elemen gaya yang sering digunakan adalah garis luar, yang dapat memberikan efek visual untuk membedakan elemen dari yang lainnya. Garis luar, yang sering kali digunakan untuk memberi penekanan pada elemen tertentu, memiliki berbagai opsi pengaturan yang dapat memengaruhi tampilannya. Salah satu cara untuk mengatur gaya garis luar adalah dengan menggunakan properti outlineStyle dalam Model Objek Dokumen (DOM) HTML.

Garis luar adalah elemen yang mengelilingi elemen lainnya tanpa mempengaruhi tata letak atau ukuran elemen tersebut. Keberadaan garis luar ini berfungsi untuk memberi tanda atau perhatian pada elemen tertentu, seperti teks yang dipilih atau kotak input yang sedang difokuskan. Meskipun garis luar tidak berpengaruh pada dimensi elemen, pengaturan garis luar tetap penting dalam mendesain halaman web, terutama ketika ingin memberikan penekanan visual atau memberi petunjuk kepada pengguna.

Properti outlineStyle digunakan untuk menentukan jenis garis luar yang diterapkan pada elemen tertentu. Dengan menggunakan properti ini, penampilan garis luar dapat disesuaikan sesuai dengan kebutuhan desain halaman web. OutlineStyle dapat memiliki beberapa nilai yang memungkinkan pengaturan garis luar dengan berbagai macam gaya, seperti garis padat, garis putus-putus, atau garis bergelombang. Selain itu, outlineStyle juga dapat menghilangkan garis luar dengan menggunakan nilai yang tepat.

Ketika bekerja dengan garis luar, properti outlineStyle berperan penting dalam memilih jenis garis yang akan digunakan untuk membingkai elemen HTML. Dengan mengubah nilai dari properti ini, pengembang web dapat mengatur apakah elemen akan memiliki garis luar atau tidak, serta jenis garis luar apa yang akan digunakan. Ini memberikan fleksibilitas besar dalam mendesain halaman web agar lebih interaktif dan menarik.

Salah satu nilai yang umum digunakan untuk outlineStyle adalah "solid", yang menunjukkan bahwa garis luar elemen tersebut akan berupa garis padat. Nilai ini sering digunakan ketika ingin menonjolkan elemen dengan cara yang sederhana dan jelas. Garis padat memberikan batas yang jelas, memisahkan elemen dari elemen lainnya dengan ketegasan. Dalam pengembangan desain, garis padat sering kali digunakan untuk menyoroti elemen-elemen penting, seperti tombol yang dapat diklik atau elemen input yang sedang dalam fokus.

Selain garis padat, ada juga nilai "dashed" yang menghasilkan garis putus-putus. Gaya garis ini sering digunakan untuk memberikan kesan yang lebih ringan atau tidak terlalu mencolok dibandingkan garis padat. Garis putus-putus dapat memberikan penekanan visual tanpa terlalu mengganggu tampilan keseluruhan halaman. Gaya ini bisa diterapkan ketika ingin menandai elemen dengan cara yang lebih halus, tanpa membebani penglihatan pengguna dengan garis yang tegas.

Untuk tampilan yang lebih dinamis, nilai "dotted" dapat digunakan, menghasilkan garis yang terdiri dari titik-titik kecil. Gaya garis ini juga memberikan penekanan visual yang lebih lembut dibandingkan dengan garis padat, tetapi tetap cukup efektif dalam menandai elemen-elemen penting. Garis titik-titik ini sangat cocok untuk elemen-elemen yang membutuhkan tanda, tetapi tidak ingin menarik perhatian berlebihan.

Selain itu, ada nilai "double" yang memungkinkan garis luar terdiri dari dua garis paralel yang dipisahkan oleh ruang kosong. Gaya garis ini memberikan tampilan yang lebih tegas dan elegan, sering digunakan untuk elemen-elemen yang sangat penting atau perlu diperjelas. Garis ganda sering kali terlihat lebih mewah dan memberi kesan bahwa elemen tersebut memiliki tingkat prioritas yang lebih tinggi dalam desain.

Terdapat pula nilai "none", yang digunakan untuk menghapus garis luar pada elemen tertentu. Dengan nilai ini, elemen yang sebelumnya memiliki garis luar akan kehilangan batas tersebut, membuatnya terlihat lebih bersih dan tidak memiliki penekanan visual apapun. Penggunaan nilai "none" berguna dalam situasi dimana garis luar tidak diperlukan atau diinginkan dalam desain halaman.

Penting untuk diingat bahwa pengaturan outlineStyle tidak akan mempengaruhi ukuran atau posisi elemen. Garis luar hanya menambah efek visual pada elemen tersebut, dan meskipun terlihat di sekitar elemen, garis luar tidak akan mengubah aliran atau tata letak elemen tersebut di dalam halaman. Oleh karena itu, pengaturan garis luar sangat bergantung pada tujuan desain dan konteks penggunaan elemen tersebut.

Dalam pengembangan web, banyak pengguna yang menganggap garis luar sebagai elemen yang tidak perlu diperhatikan terlalu serius. Namun, dengan pemahaman yang tepat tentang properti outlineStyle dan cara pengaturannya, garis luar bisa menjadi alat yang sangat efektif dalam menciptakan desain yang menarik dan mudah dipahami. Garis luar yang tepat bisa membantu membedakan elemen-elemen dalam halaman dan memberi petunjuk visual kepada pengguna tentang interaksi yang tersedia. Oleh karena itu, sangat penting untuk mempertimbangkan penggunaannya dengan hati-hati dalam desain halaman web.

Penggunaan outlineStyle dalam konteks desain web tidak hanya terbatas pada elemen-elemen interaktif seperti tombol atau kotak input. Gaya garis luar juga dapat diterapkan pada elemen-elemen non-interaktif, seperti gambar atau teks, untuk memberikan penekanan atau membedakan elemen-elemen tersebut dalam konteks visual. Dalam pengaturan yang lebih kompleks, garis luar bisa digunakan untuk memberikan efek khusus, seperti menandai bagian tertentu dari halaman yang sedang diubah atau diinteraksikan.

Dalam banyak kasus, pengaturan outlineStyle sering digunakan bersama dengan properti lainnya, seperti outlineWidth dan outlineColor, untuk memberikan kendali penuh atas tampilan garis luar. Kombinasi ini memungkinkan pengembang web untuk menciptakan efek garis luar yang lebih beragam, mulai dari garis tipis hingga garis tebal dengan warna yang mencolok. Dengan cara ini, garis luar tidak hanya berfungsi sebagai pembatas, tetapi juga dapat menambah elemen estetika dalam desain web.

Dalam praktiknya, pengaturan garis luar yang tepat dapat meningkatkan pengalaman pengguna di halaman web. Elemen-elemen yang memiliki garis luar yang sesuai dapat lebih mudah dikenali dan diakses, terutama bagi pengguna yang mengandalkan fitur aksesibilitas. Pengaturan garis luar yang efektif juga membantu membimbing pengguna dalam mengarahkan perhatian ke elemen-elemen penting atau yang membutuhkan interaksi lebih lanjut.

Secara keseluruhan, properti outlineStyle dalam Model Objek Dokumen HTML adalah alat yang sangat berguna untuk memberikan sentuhan visual yang diperlukan dalam desain halaman web. Dengan berbagai opsi gaya yang tersedia, pengembang web memiliki kebebasan untuk menyesuaikan elemen-elemen sesuai dengan tujuan desain dan kebutuhan pengguna. Pemahaman tentang cara menggunakan properti ini dengan efektif dapat membantu menciptakan pengalaman pengguna yang lebih baik, dengan elemen-elemen yang lebih mudah dikenali dan dinavigasi.

Artikel ini akan dibaca oleh: Destri Sinta Bela, Destyara Salsabila Ramadhani, Devi Maulina N.A Nur Alifah, Devina Ayu Septariza, dan Devita Aulia Putri Agmi.
Location: Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Mengatur Gaya Garis Luar HTML Menggunakan outlineStyle DOM"

  1. AnonimSelasa, 02 Agustus 2022 pukul 13.23.00 WIB

    Jenis browser apas aja yang dapat digunakan untuk mengaktifkan properti outlineStyle DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimSelasa, 02 Agustus 2022 pukul 13.24.00 WIB

      Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti outlineStyle DOM pada HTML:
      1. Google Chrome
      2. Internet Explorer
      3. Firefox
      4. Opera
      5. Safari

      Hapus
  2. AnonimRabu, 10 Agustus 2022 pukul 19.05.00 WIB

    Apa yang dimaksud dengan properti outline Style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimRabu, 10 Agustus 2022 pukul 19.05.00 WIB

      Properti outlineStyle DOM pada HTML merupakan properti yang digunakan untuk menetapkan atua mengembalikan style kerangka pada sekitar elemen. Outline merupakan garis yang terdapat pada sekitar elemen yang ditampilkan di sekitar margin elemen.

      Hapus
    2. AnonimRabu, 10 Agustus 2022 pukul 19.06.00 WIB

      Properti outlineStyle DOM pada HTML merupakan properti yang digunakan untuk mengembalikan dan memodifikasi kerangka elemen dalam dokumen HTML.

      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 -