4 Value Properti borderColor Style DOM pada HTML

Properti Style borderColor DOM pada HTML digunakan untuk menentukan warna dari elemen border. Properti borderColor juga bisa diberikan secara eksplisit berupa turunan dari parent-nya atau dari nilai default.

Sintak:
  • Untuk mendapatkan properti borderColor: object.style.borderColor
  • Untuk mengatur properti borderColor: object.style.borderColor = "color|transparent|initial|inherit"

Return Value: berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan warna dari sebuah border.

Property Value:
  • color: digunakan untuk menentukan warna border yang berkoresponden dengan elemen, dengan nilai default adalah warna hitam.
  • transparent: digunakan untuk mengatur warna border yang berkoresponden dengan elemen ke transparent.
  • inherit: jika tidak terdapat nilai spesifik dari bidang ini, maka akan diturunkan nilai dari elemen parent, dan jika tidak terdapat parent maka nilai root akan digunakan sebagai nilai initial(atau nilai default).
  • initial: digunakan untuk menerapkan nilai initial(atau nilai default) dari sebuah properti ke suatu elemen. Nilai initial tersebut harus tidak memberikan kebingungan oleh nilai spesifik dari browser style sheet. Ketika properti borderColor diatur ke nilai initial, maka nilai yang akan muncul adalah warna hitam yang merupakan nilai default.

Sintak: borderColor: "red";

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<style>

#MKN1_Div 

{

width: 200px;

text-align: center;

font-size: 20px;

margin-left: 210px;

margin-top: 20px;

border: thick solid red;

}

</style>

</head>

 

<body 

align="center">

 

<button 

onclick="MKN1_Function()">

Ubah warna border

</button>

 

<div 

id="MKN1_Div">

Blog Elfan

</div>

 

<br>

 

<script>

function MKN1_Function() 

{

document.getElementById("MKN1_Div")

.style.borderColor = "green";

}

</script>

 

</body>

 

</html>

Output:
Blog Elfan



Sintak: borderColor: "red green";

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<style>

#MNN2_Div 

{

width: 200px;

text-align: center;

font-size: 20px;

margin-left: 210px;

margin-top: 20px;

border: thick solid red;

}

</style>

</head>

 

<body 

align="center">

 

<button 

onclick="MNN2_Function()">

Ubah warna border

</button>

 

<div 

id="MNN2_Div">

Blog Elfan

</div>

 

<br>

 

<script>

function MNN2_Function() 

{

document.getElementById("MNN2_Div")

.style.borderColor = "red green";

}

</script>

 

</body>

 

</html>

Output:
Blog Elfan



Sintak: borderColor: "red green blue";

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<style>

#MBB3_Div 

{

width: 200px;

text-align: center;

font-size: 20px;

margin-left: 210px;

margin-top: 20px;

border: thick solid red;

}

</style>

</head>

 

<body 

align="center">

 

<button 

onclick="MBB3_Function()">

Ubah warna border

</button>

 

<div 

id="MBB3_Div">

Blog Elfan

</div>

 

<br>

 

<script>

function MBB3_Function() 

{

document.getElementById("MBB3_Div")

.style.borderColor = "red green blue";

}

</script>

 

</body>

 

</html>

Output:
Blog Elfan



Sintak: borderColor: "red green blue orange";

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<style>

#MKK4_Div 

{

width: 200px;

text-align: center;

font-size: 20px;

margin-left: 210px;

margin-top: 20px;

border: thick solid red;

}

</style>

</head>

 

<body 

align="center">

 

<button 

onclick="MKK4_Function()">

Ubah warna border

</button>

 

<div 

id="MKK4_Div">

Blog Elfan

</div>

 

<br>

 

<script>

function MKK4_Function() 

{

document.getElementById("MKK4_Div")

.style.borderColor = "red green blue orange";

}

</script>

 

</body>

 

</html>

Output:
Blog Elfan



Sintak: borderColor = "transparent"

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<style>

#MKN5_Div 

{

width: 200px;

text-align: center;

font-size: 20px;

margin-left: 210px;

margin-top: 20px;

border: thick solid red;

}

</style>

</head>

 

<body 

align="center">

 

<button 

onclick="MKN5_Function()">

Warna Border Transparent

</button>

 

<div 

id="MKN5_Div">

Blog Elfan

</div>

 

<br>

 

<script>

function MKN5_Function() 

{

document.getElementById("MKN5_Div")

.style.borderColor = "transparent";

}

</script>

 

</body>

 

</html>

Output:
Blog Elfan

Komentar

  1. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti borderColor Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti borderColor Style DOM pada HTML:
      1. Google Chrome 1.0
      2. Internet Explorer 4.0
      3. Mozilla firefox 1.0
      4. Opera 3.5
      5. Safari 1.0

      Hapus
  2. Apa yang dimaksud dengan properti bordercolor style DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti borderColor Style DOM pada HTMl merupakan properti sytle yang dapat digunakan untuk mengatur atau mengembalikan nilai warna batas dari suatu elemen.

      Hapus
    2. Pengguna dapat menemukan informasi warna yang lebih banyak mengenai properti borderColor jika warna yang diterapkan tersebut digunakan bersamaan dengan CSS.

      Hapus

Posting Komentar

*Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung. :D

*Jika terdapat typo, link bermasalah, dan lain sebagainya, pengunjung dapat melaporkan permasalahan tersebut melalui WA: +62-896-2514-6106




~ Ikatlah Ilmu dengan Memostingkannya ~

Referensi Tambahan:

Enkapsulasi pada Java

2 Jenis Utama Kegiatan Penelitian Berdasarkan Waktunya, Crosssectional Salah Satunya

6 Contoh Program Method Overloading pada Java

3 Jenis Utama Looping pada Java

Perbedaan stdio.h dan stdlib.h pada Bahasa C