Mengatur Warna Batas HTML Menggunakan borderColor Style DOM
- Untuk mendapatkan properti borderColor: object.style.borderColor
- Untuk mengatur properti borderColor: object.style.borderColor = "color|transparent|initial|inherit"
Return Values: 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: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: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: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:Sintak: borderColor = "transparent"
<!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:- 4 Contoh Properti borderImageSource Style DOM pada HTML
- 6 Contoh Properti borderImageWidth Style DOM pada HTML
- 5 Value Properti borderLeft Style DOM pada HTML
- 4 Value Properti borderLeftColor Style DOM pada HTML
- 12 Value Properti borderLeftStyle DOM HTML
- 6 Value Properti borderLeftWidth Style DOM pada HTML
- 4 Value Properti borderRadius Style DOM pada HTML
5 komentar untuk "Mengatur Warna Batas HTML Menggunakan borderColor 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 browser apa saja yang dapat digunakan untuk mengaktifkan properti borderColor Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti borderColor Style DOM pada HTML:
Hapus1. Google Chrome 1.0
2. Internet Explorer 4.0
3. Mozilla firefox 1.0
4. Opera 3.5
5. Safari 1.0
Apa yang dimaksud dengan properti bordercolor style DOM pada HTML?
BalasHapusProperti borderColor Style DOM pada HTMl merupakan properti sytle yang dapat digunakan untuk mengatur atau mengembalikan nilai warna batas dari suatu elemen.
HapusPengguna dapat menemukan informasi warna yang lebih banyak mengenai properti borderColor jika warna yang diterapkan tersebut digunakan bersamaan dengan CSS.
Hapus