Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengatur Garis Luar HTML Menggunakan Outline Style DOM

Properti Style outline DOM pada HTML digunakan untuk mengatur atau mengembalikan semua nilai properti outline dalam satu deklarasi. Properti outline akan menggambar sebuah garis disekitar elemen yang dipengaruhinya. Properti outline juga akan mengatur atau mengembalikan properti border lebih banyak dalam bentuk form singkat.

5 Value Properti Outline Style DOM pada HTML
Properti Outline Style DOM

Sebelum memahami lebih dalam materi tentang Mengatur Garis Luar HTML Menggunakan Outline Style DOM, terlebih dahulu pelajari materi tentang: Orphans Style HTML DOM dan Fungsinya [klik], Mengatur Urutan HTML Menggunakan Order Style DOM [klik], dan Mengatur Tranparansi Elemen HTML Menggunakan Opacity Style DOM [klik].

Nilai outline dapat diatur seperti nilai properti berikut:
  • outline-width
  • outline-style
  • outline-color

Sintak:
  • Mengembalikan nilai properti outline: object.style.outline
  • Mengatur nilai properti outline: object.style.outline = "width|style|color|initial|inherit"

Return Values: berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan nilai lebar outline, style outline dan atau warna dari suatu elemen.

Baca Juga:

Property Values:
  • width: digunakan untuk mengatur nilai lebar outline.
  • style: digunakan untuk mengatur nilai style dari outline.
  • color: digunakan untuk mengatur warna dari outline.
  • initial: digunakan untuk mengatur nilai properti outline ke nilai default-nya.
  • inherit: digunakan untuk menerima nilai turunan properti dari elemen parent.

Contoh: menambahkan sebuah outline biru solid thick disekitar container div.

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Style outline DOM 

pada HTML

</title>

</head>

 

<body>

 

<div 

id = "container">

 

<h1>

Blog Elfan

</h1>

 

<h2>

Properti Style outline DOM

</h2>

 

</div>

 

<script>

function myBons() 

{

document.getElementById("container").style.outline

= "thick solid blue";

}

myBons();

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style outline DOM



Contoh: menambahkan nilai panjang outline green dashed pada container div.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style outline DOM 

pada HTML

</title>

 

<style>

#container 

{

border: 3px solid black;

outline: 3px solid blue;

}

</style>

 

</head>

 

<body>

 

<div 

id = "MNK1">

 

<h1>

Blog Elfan

</h1>

 

<h2>

Properti Style outline DOM

</h2>

 

</div>

 

<button 

onclick = "myBons()">

Click Here!

</button>

 

<!-- script untuk mengatur 

nilai style outline -->

<script>

function myBons() 

{

document.getElementById("MNK1").style.outline

= "7px dashed green";

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style outline DOM


Artikel ini didedikasikan kepada: Delima Trisna Pramudiptha Poeger, Della Octaria Hadi, Dentha Albany, Destri Sinta Bela, dan Destyara Salsabila Ramadhani.

5 komentar untuk "Mengatur Garis Luar HTML Menggunakan Outline Style DOM"

  1. Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti Outline Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut merupakan beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti Outline Style DOM pada HTML:
      1. Google Chrome
      2. Internet Explorer
      3. Firefox
      4. Opera
      5. Safari

      Hapus
  2. Apa yang dimaksud dengan properti Outline Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti outlineStyle DOM pada HTML merupakan properti yang digunakan untuk menetapkan atau mengembalikan style kerangka pada sekitar elemen, dimana outline merupakan garis yang terdapat pada bagian sekitar elemen.

      Hapus
    2. 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 -
- Big things start from small things -