Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Mengatur Warna Batas HTML Menggunakan borderColor Style DOM

Dipublikasikan Oleh: elfanmauludi 5 komentar
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.


Sebelum memahami lebih dalam materi tentang Mengatur Warna Batas HTML Menggunakan borderColor Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Border HTML Menggunakan borderCollapse Style DOM, Mengatur Lebar Batas Bawah HTML Menggunakan borderBottomWidth Style DOM, dan Mengatur Batas Bawah HTML Menggunakan borderBottomStyle DOM.

Sintak:
  • 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:
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


Mengatur warna batas pada elemen HTML adalah salah satu cara untuk meningkatkan tampilan visual sebuah halaman web. Setiap elemen HTML dapat memiliki batas atau garis di sekelilingnya yang dikenal dengan istilah batas. Batas ini tidak hanya memberikan pemisahan antar elemen, tetapi juga dapat menambah estetika dan kejelasan desain halaman web. Salah satu cara untuk mengubah warna batas tersebut adalah dengan menggunakan properti style DOM untuk mengatur warna batas. Penggunaan properti ini memungkinkan desain elemen untuk lebih dinamis dan menyesuaikan dengan tema atau gaya halaman web yang diinginkan.

Properti warna batas, yang dikenal dengan nama borderColor, merupakan salah satu bagian penting dalam pengaturan gaya elemen HTML. Properti ini memungkinkan pengguna untuk mengubah warna batas elemen yang ditentukan, yang mencakup batas atas, bawah, kiri, dan kanan. Melalui borderColor, pengaturan warna pada setiap sisi batas dapat disesuaikan dengan warna yang diinginkan. Selain itu, pengaturan ini memungkinkan pemilihan warna secara spesifik, baik melalui kode warna heksadesimal, nama warna yang sudah ada, ataupun menggunakan sistem RGB (merah, hijau, biru) untuk mengatur warna batas elemen.

Perubahan warna batas sangat berguna dalam berbagai skenario desain. Sebagai contoh, saat merancang formulir, warna batas dapat digunakan untuk menyoroti elemen-elemen tertentu, seperti kolom input atau tombol yang aktif. Warna batas yang mencolok atau berbeda dapat membantu menarik perhatian pengguna terhadap bagian-bagian penting pada halaman web. Dalam desain antarmuka pengguna, pemberian warna pada batas sering digunakan untuk menambah kesan visual yang menarik, memberikan kedalaman, serta memperjelas hierarki elemen dalam tata letak halaman web.

Selain pengaturan warna, penggunaan properti ini juga memungkinkan untuk menentukan warna batas yang berbeda pada masing-masing sisi elemen. Dengan demikian, pengguna dapat memberikan sentuhan desain yang lebih rumit, seperti memberikan warna yang berbeda pada sisi kiri dan kanan sebuah elemen atau membuat batas atas dan bawah elemen memiliki warna yang kontras. Fleksibilitas ini memberikan kebebasan kepada perancang halaman untuk bereksperimen dengan berbagai kombinasi warna, yang pada akhirnya dapat menciptakan desain yang lebih menarik dan mudah dipahami.

Pengaturan warna batas dapat diatur berdasarkan konteks dan kebutuhan desain halaman web. Misalnya, dalam pembuatan halaman dengan tema gelap atau terang, warna batas dapat disesuaikan untuk mencocokkan tema keseluruhan. Pada tema gelap, warna batas yang lebih terang atau cerah akan lebih mudah terlihat, memberikan kontras yang tajam dengan latar belakang gelap. Sebaliknya, pada tema terang, penggunaan warna batas yang sedikit lebih gelap atau netral akan menciptakan tampilan yang lebih elegan dan seimbang. Dengan memperhatikan kesesuaian warna batas terhadap tema, elemen-elemen pada halaman akan lebih serasi dan nyaman dilihat oleh pengunjung.

Penggunaan warna yang tepat untuk batas elemen tidak hanya berfokus pada estetika, tetapi juga pada pengalaman pengguna. Pengguna yang mengakses halaman web akan lebih mudah berinteraksi dengan elemen-elemen yang memiliki batas yang jelas dan mudah dilihat. Selain itu, warna batas yang berbeda pada elemen-elemen yang berbeda dapat memberikan petunjuk visual yang memudahkan navigasi dan interaksi. Misalnya, pada sebuah formulir, kolom input yang sedang aktif dapat diberi warna batas yang lebih menonjol untuk memberi tanda kepada pengguna bahwa kolom tersebut siap untuk diisi. Dengan demikian, warna batas berfungsi sebagai alat bantu visual yang efektif untuk meningkatkan kenyamanan dan kegunaan halaman web.

Selain perubahan pada warna, pengaturan warna batas juga berhubungan erat dengan ketebalan dan jenis garis batas yang digunakan. Kombinasi dari ketebalan, jenis garis, dan warna dapat menciptakan tampilan yang lebih dinamis dan sesuai dengan tujuan desain halaman web. Dalam beberapa kasus, pengaturan warna batas bisa disertai dengan pengaturan jenis garis batas, seperti garis putus-putus atau bergaris ganda, yang dapat memberikan kesan tertentu pada elemen. Misalnya, garis batas putus-putus sering digunakan untuk menunjukkan elemen yang bersifat sementara atau sekunder, sementara garis ganda bisa menandakan elemen yang memiliki tingkat prioritas lebih tinggi dalam desain.

Bahkan, warna batas dapat digunakan untuk menciptakan efek visual tertentu, seperti saat mengubah warna saat elemen berada dalam kondisi tertentu. Salah satu contoh pengaplikasiannya adalah ketika elemen menjadi fokus, misalnya saat kursor mouse berada di atas elemen tersebut, atau saat elemen mendapatkan interaksi dari pengguna. Perubahan warna batas dalam kondisi ini dapat memperjelas bahwa elemen tersebut siap diakses atau sedang dipilih. Hal ini tidak hanya meningkatkan tampilan visual, tetapi juga memberikan umpan balik yang jelas kepada pengguna mengenai status elemen yang bersangkutan.

Penggunaan borderColor juga berguna dalam elemen-elemen yang memiliki lebih dari satu batas, seperti tabel atau elemen berbentuk grid. Setiap sel dalam tabel atau grid dapat diberi warna batas yang berbeda, yang memisahkan antar kolom dan baris secara jelas. Dengan memberikan warna yang berbeda pada setiap batas, pembaca atau pengguna dapat lebih mudah membedakan antara satu sel dengan sel lainnya. Hal ini sangat bermanfaat dalam desain tabel yang memiliki banyak data atau informasi, dimana keterbacaan menjadi prioritas utama.

Penting untuk memperhatikan bahwa pemilihan warna batas harus mempertimbangkan faktor keterbacaan dan kenyamanan visual. Meskipun banyak warna yang tersedia, pemilihan warna yang terlalu mencolok atau bertabrakan dengan warna latar belakang dapat mengganggu kenyamanan mata pengguna. Oleh karena itu, pemilihan warna batas harus dilakukan dengan hati-hati, mengingat tujuan desain serta kesesuaian warna dengan elemen-elemen lain dalam halaman web. Dalam hal ini, teori warna dan prinsip desain visual akan sangat membantu untuk menciptakan kombinasi warna yang efektif dan menarik.

Sebagai kesimpulan, pengaturan warna batas pada elemen HTML menggunakan properti borderColor style DOM adalah salah satu aspek penting dalam desain halaman web. Dengan pengaturan ini, elemen-elemen dapat dipisahkan secara visual dan diberi penekanan yang sesuai dengan konteks dan kebutuhan halaman. Pemilihan warna yang tepat, disertai dengan pertimbangan estetika dan pengalaman pengguna, akan memperkaya tampilan dan interaksi pada halaman web. Warna batas tidak hanya sekadar elemen dekoratif, tetapi juga alat bantu visual yang memainkan peran penting dalam menciptakan halaman web yang fungsional dan menarik.

Artikel ini akan dibaca oleh: Geiska Agli Natasha Putri, Ghazi Dzulfikar Putra Bagus, Gilar Dwiki Yoga, Gladiza Cahyandaru Hakiki, dan Hanityo Rizky Pratama Widodo.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Mengatur Warna Batas HTML Menggunakan borderColor Style DOM"

  1. AnonimSenin, 25 April 2022 pukul 19.08.00 WIB

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

    BalasHapus
    Balasan
    1. AnonimSenin, 25 April 2022 pukul 19.36.00 WIB

      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. AnonimSenin, 09 Mei 2022 pukul 08.55.00 WIB

    Apa yang dimaksud dengan properti bordercolor style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimSenin, 09 Mei 2022 pukul 08.55.00 WIB

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

      Hapus
    2. AnonimSenin, 09 Mei 2022 pukul 08.55.00 WIB

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

      Hapus

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 -