Mengatur Warna Garis Luar HTML Menggunakan outlineColor Style DOM
 |
| Properti outlineColor Style DOM |
Sintak:
- digunakan untuk mengembalikan nilai properti: object.style.outlineColor
- digunakan untuk mengatur nilai properti outlineColor: object.style.outlineColor = "color|invert|initial|inherit"
Property Values:
- color: berfungsi untuk mengatur warna outline menuju ke warna CSS yang bernilai valid.
- invert: berfungsi untuk mengatur warna outline menjadi sebuah warna yang juga dapat dilakukan sebaliknya pada background, guna memastikan nilai outline akan selalu visible atau terlihat.
- inherit: berfungsi untuk mengatur warna outline sesuai dengan nilai properti outline-color yang diturunkan dari elemen parent.
Return Values: digunakan untuk mengembalikan sebuah nilai string yang merepresentasikan warna dari outline pada suatu elemen.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style outlineColor
DOM HTML
</title>
<style>
#myDiv
{
border: 1px solid red;
outline: green dotted thick;
}
</style>
</head>
<body>
<h1>
Blog Elfan
</h1>
<h2>
Properti Style outlineColor
DOM HTML
</h2>
<div
id="myDiv">
Selamat datang elfan.
</div>
<br>
<button
type="button"
onclick="myFunction()">
Click Here!
</button>
<script>
function myFunction()
{
// Mengatur outline color.
document.getElementById("myDiv")
.style.outlineColor = "red";
}
</script>
</body>
</html>
Blog Elfan
Properti Style outlineColor DOM HTML
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style outlineColor
DOM HTML
</title>
<style>
#myDiv
{
border: 1px solid red;
outline: dotted thick;
}
</style>
</head>
<body>
<h1>
Blog Elfan
</h1>
<h2>
Properti Style outlineColor
Propert DOM pada HTML
</h2>
<div
id="myDiv"
style="outline-color:green;">
Selamat datang bambang.
</div>
<br>
<button
type="button"
onclick="myFunction()">
Click Here!
</button>
<script>
function myFunction()
{
alert(document.getElementById(
"myDiv").style.outlineColor);
}
</script>
</body>
</html>
Output:Blog Elfan
Properti Style outlineColor Propert DOM pada HTML
- 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]
- 4 Value Properti paddingTop Style DOM pada HTML [klik]
6 komentar untuk "Mengatur Warna Garis Luar HTML Menggunakan outlineColor 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 -
Jenis browse apa saja yang dapat digunakan untuk mengaktifkan properti outlineColor Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti outlineColor Style DOM pada HTML:
Hapus1. Google Chrome
2. Internet Explorer
3. Firefox
4. Opera
5. Safari
Apa yang dimaksud dengan properti outlineColor Style DOM pada HTML?
BalasHapusProperti outlineColor Style DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mengembalikan nilai warna kerangka di sekitar elemen.
HapusoutlineColor merupakan garis yang terdapat pada sekitar elemen, yang ditampilkan di sekitar margin elemen. Namun dengan properti batas.
HapusoutlineColor bukan merupakan bagian dari dimensi elemen, oleh karena itu properti elemen Width dan properti elemen Height tidak memuat nilai lebar outline.
Hapus