Mengatur Garis Luar HTML Menggunakan Outline Style DOM
 |
| Properti Outline 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 [klik]
- 6 Contoh Properti overflowX Style DOM pada HTML [klik]
- 6 Contoh Properti overflowY Style DOM pada HTML [klik]
- 4 Contoh Properti Padding Style DOM pada HTML [klik]
- 4 Value Properti paddingBottom Style DOM pada HTML [klik]
- 5 Value Properti paddingLeft Style DOM pada HTML [klik]
- 4 Value Properti paddingRight Style DOM pada HTML [klik]
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