Mengatur Garis Luar HTML Menggunakan 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, Mengatur Urutan HTML Menggunakan Order Style DOM, dan Mengatur Tranparansi Elemen HTML Menggunakan Opacity Style DOM.
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.
- 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>
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>
Blog Elfan
Properti Style outline DOM
- 6 Value Properti Overflow Style DOM pada HTML
- 6 Contoh Properti overflowX Style DOM pada HTML
- 6 Contoh Properti overflowY Style DOM pada HTML
- 4 Contoh Properti Padding Style DOM pada HTML
- 4 Value Properti paddingBottom Style DOM pada HTML
- 5 Value Properti paddingLeft Style DOM pada HTML
- 4 Value Properti paddingRight Style DOM pada HTML
5 komentar untuk "Mengatur Garis Luar HTML Menggunakan Outline Style DOM"
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 -
Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti Outline Style DOM pada HTML?
BalasHapusBerikut merupakan beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti Outline Style DOM pada HTML:
Hapus1. Google Chrome
2. Internet Explorer
3. Firefox
4. Opera
5. Safari
Apa yang dimaksud dengan properti Outline Style DOM pada HTML?
BalasHapusProperti 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.
HapusProperti outlineStyle DOM pada HTML merupakan properti yang digunakan untuk mengembalikan dan memodifikasi kerangka elemen dalam dokumen HTML.
Hapus