Mengatur Batas Lebar HTML Menggunakan borderWidth Style DOM
 |
| Ilustrasi borderWidth DOM |
- digunakan untuk mengatur nilai lebar border: object.style.borderWidth = value
- digunakan untuk mengembalikan nilai lebar properti: object.style.borderWidth
Return Values: berfungsi untuk mengembalikan nilai elemen border yang dipilih sesuai dengan style yang diberikan.
Terdapat enam value berbeda dari properti borderWidth yang diperlihatkan sebagai berikut:
- thick: digunakan untuk mengatur lebar border ke ukuran thick. Sintak: document.getElementById("id_name").style.borderWidth = "thick";
- length: digunakan untuk mengatur setiap sisi dari borderWidth sesuai dengan nilai length, dimana nilai length dapat diatur dalam satuan px, em, dan lain sebagainya. Sintak: document.getElementById("id_name").style.borderWidth = top_px right_px bottom_px left_px;
- thin: digunakan untuk mengatur lebar border ke tipe thin. Sintak: document.getElementById("id_name").style.borderWidth = "thin";
- medium: digunakan untuk mengubah lebar border menjadi medium, yang sekaligus merupakan nilai default dari properti borderWidth. Sintak: document.getElementById("id_name").style.borderWidth = "medium";
- inherit: digunakan untuk menerima nilai turunan dari properti parent. Sintak: document.getElementById("id_name").style.borderWidth = "inherit";
- initial: digunakan untuk mengatur properti borderWidth ke nilai default-nya. Sintak: document.getElementById("id_name").style.borderWidth = "initial";
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style borderWidth DOM
</title>
<style>
div
{
border: 1px solid green;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div id="d1">
<p>
Blog Elfan
</p>
<p>
Blog TIK merupakan portal ilmu
komputer.
</p>
</div>
<br>
<input
type="button"
onclick="myFunction()"
value="Click Me.!" />
<script>
function myFunction()
{
document.getElementById("d1").style.borderWidth
= "thick";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style borderWidth DOM
</title>
<style>
div
{
border-style: solid;
border: 1px solid green;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div id="d1">
<p>
Blog Elfan
</p>
<p>
Blog TIK merupakan portal ilmu
komputer.
</p>
</div>
<br>
<input
type="button"
onclick="mainFunction()"
value="Click Me.!" />
<script>
function mainFunction()
{
document.getElementById("d1").style.borderWidth
= "1px 7px 15px 25px";
}
</script>
</body>
</html>
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style borderWidth DOM
</title>
<style>
div
{
border: 8px solid green;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div id="d1">
<p>
Blog Elfan
</p>
<p>
Blog TIK merupakan portal ilmu
komputer.
</p>
</div>
<br>
<input
type="button"
onclick="myFunction()"
value="Click Me.!" />
<script>
function myFunction()
{
document.getElementById("d1").style.borderWidth
= "thin";
}
</script>
</body>
</html>
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style borderWidth DOM
</title>
<style>
div
{
border: 30px solid green;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div id="d1">
<p>
Blog Elfan
</p>
<p>
Blog TIK merupakan portal ilmu
komputer.
</p>
</div>
<br>
<input
type="button"
onclick="myFunction()"
value="Click Me.!" />
<script>
function myFunction()
{
document.getElementById("d1").style.borderWidth
= "medium";
}
</script>
</body>
</html>
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style borderWidth DOM
</title>
<style>
span
{
color: blue;
border: 3px solid black;
padding: 3px;
}
.d1 span
{
color: inherit;
}
div
{
padding: 5px;
display: block;
margin: 6px;
}
.c2
{
width: 50%;
height: 40%;
padding: 20px;
border: 2px solid green;
}
</style>
</head>
<body>
<div class="c2">
<div>
Baris pertama
<span>
span element
</span>.
</div>
<div
class="d1"
style="color:green">
Baris kedua
<span id="mm1">
span element
</span>.
</div>
<div style="color:red">
Baris ketiga
<span>
span element
</span>.
</div>
</div>
<br>
<input
type="button"
onclick="myFunction()"
value="Click Me.!" />
<script>
function myFunction()
{
document.getElementById("mm1").style.borderWidth
= "inherit";
}
</script>
</body>
</html>
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style borderWidth DOM
</title>
<style>
div
{
border: 10px solid;
border-color: green;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div id="d1">
<p>
Blog Elfan
</p>
<p>
Blog TIK merupakan portal ilmu
komputer.
</p>
</div>
<br>
<input
type="button"
onclick="myFunction()"
value="Click Me.!" />
<script>
function myFunction()
{
document.getElementById("d1").style.borderWidth
= "initial";
}
</script>
</body>
</html>
- 4 Value Properti clip Style DOM pada HTML [klik]
- 2 Contoh Properti color Style DOM pada HTML [klik]
- 4 Value Properti columnCount Style DOM pada HTML [klik]
- 4 Value columnFill Style DOM pada HTML [klik]
- 4 Value columnGap Style DOM pada HTML [klik]
- 5 Value Properti columnRule Style DOM pada HTML [klik]
- 3 Value Properti columnRuleColor Style DOM pada HTML [klik]
5 komentar untuk "Mengatur Batas Lebar HTML Menggunakan borderWidth 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 borderWidth Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser populer yang dapat digunakan untuk mengaktifkan properti borderWidth Style DOM pada HTML:
Hapus1. Google Chrome
2. Internet Explorer
3. Firefox
4. Safari
5. Opera
Apa yang dimaksud dengan properti borderWidth Style DOM pada HTML?
BalasHapusProperti borderWidth Style DOM pada HTML digunakan untuk menetapkan atau mengembalikan nilai lebar batas dari suatu elemen.
HapusProperti borderWidth digunakan untuk menetapkan atau mendapatkan nilai lebar batas elemen. Properti borderWidth juga dapat memiliki satu hingga empat nilai sekaligus.
Hapus