Mengatur Batas Lebar Kiri HTML Menggunakan borderLeftWidth Style DOM
 |
| Ilustrasi Properti borderLeftWidth |
- digunakan untuk mendapatkan nilai properti borderLeftWidth: object.style.borderLeftWidth
- digunakan untuk mengatur nilai properti borderLeftWidth: object.style.borderLeftWidth = "thin|medium|thick|length|initial|inherit"
Return Values: berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan ukuran lebar atau width dari elemen left border.
Property Values:
- thin: digunakan untuk mendefinisikan sebuah left border bertipe thin.
- medium: digunakan untuk mendefinisikan sebuah left border bertipe medium, yang merupakan nilai default dari properti.
- thick: digunakan untuk mendefinisikan sebuah left border bertipe thick.
- length: digunakan untuk mendefinisikan nilai lebar left border dalam unit satuan ukur panjang atau length.
- initial: digunakan untuk mengatur properti berderLeftWidth ke nilai default-nya.
- inherit: digunakan untuk menerima nilai properti turunan yang berasal dari nilai parent.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Properti DOM Style
BorderLeftWidth
</title>
<style>
.elem1
{
padding: 10px;
border-style: solid;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti DOM Style
BorderLeftWidth
</b>
<p
class="elem1">
Blog TIK merupakan portal ilmu
komputer yang digunakan untuk
mempelajari berbagai ilmu
pemrograman.
</p>
<button
onclick="changeWidth()">
Change BorderLeftWidth
</button>
<!-- Script untuk mengubah
BorderLeftWidth -->
<script>
function changeWidth()
{
elem1 = document.querySelector('.elem1');
elem1.style.borderLeftWidth = 'thin';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti DOM Style BorderLeftWidthBlog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai ilmu pemrograman.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Properti DOM Style
BorderLeftWidth
</title>
<style>
.elem2
{
padding: 10px;
border-style: solid;
border-left-width: thin;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti DOM Style
BorderLeftWidth
</b>
<p
class="elem2">
Blog TIK merupakan portal ilmu
komputer yang berisi berbagai
materi tentang pemrograman dan
materi TIK lainnya yang sedang
populer saat ini.
</p>
<button
onclick="changeWidth()">
Change BorderLeftWidth
</button>
<!-- Script untuk mengubah
BorderLeftWidth -->
<script>
function changeWidth()
{
elem2 = document.querySelector('.elem2');
elem2.style.borderLeftWidth = 'medium';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti DOM Style BorderLeftWidthBlog TIK merupakan portal ilmu komputer yang berisi berbagai materi tentang pemrograman dan materi TIK lainnya yang sedang populer saat ini.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Properti DOM Style
BorderLeftWidth
</title>
<style>
.elem3
{
padding: 10px;
border-style: solid;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti DOM Style
BorderLeftWidth
</b>
<p
class="elem3">
Blog TIk merupakan portal ilmu
komputer yang digunakan untuk
mempelajari berbagai ilmu
pemrograman dan berbagai
materi TIK lainnya yang sedang
populer.
</p>
<button
onclick="changeWidth()">
Change BorderLeftWidth
</button>
<!-- Script untuk
mengubahBorderLeftWidth -->
<script>
function changeWidth()
{
elem3 = document.querySelector('.elem3');
elem3.style.borderLeftWidth = 'thick';
}
</script>
</body>
</html>
Blog Elfan
Properti DOM Style BorderLeftWidthBlog TIk merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai ilmu pemrograman dan berbagai materi TIK lainnya yang sedang populer.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Properti Style BorderLeftWidth
DOM
</title>
<style>
.elem4
{
padding: 10px;
border-style: solid;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style BorderLeftWidth
DOM
</b>
<p
class="elem4">
Blog TIK merupakan portal ilmu
komputer yang digunakan untuk
mempelajari berbagai ilmu
pemrograman yang sedang
populer saat ini.
</p>
<button
onclick="changeWidth()">
Change BorderLeftWidth
</button>
<!-- Script untuk mengubah
BorderLeftWidth -->
<script>
function changeWidth()
{
elem4 = document.querySelector('.elem4');
elem4.style.borderLeftWidth = '10px';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti Style BorderLeftWidth DOMBlog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai ilmu pemrograman yang sedang populer saat ini.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Properti Style BorderLeftWidth
DOM
</title>
<style>
.elem5
{
padding: 10px;
border-style: solid;
border-left-width: 15px;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style BorderLeftWidth
DOM
</b>
<p
class="elem5">
Blog TIK merupakan portal ilmu
komputer yang berisi berbagai
materi populer seputar dunia
pemrograman dan materi lainnya
seputar ilmu komputer.
</p>
<button
onclick="changeWidth()">
Change BorderLeftWidth
</button>
<!-- Script untuk mengubah
BorderLeftWidth -->
<script>
function changeWidth()
{
elem5 = document.querySelector('.elem5');
elem5.style.borderLeftWidth = 'initial';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti Style BorderLeftWidth DOMBlog TIK merupakan portal ilmu komputer yang berisi berbagai materi populer seputar dunia pemrograman dan materi lainnya seputar ilmu komputer.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Properti Style BorderLeftWidth
DOM
</title>
<style>
#parent6
{
padding: 10px;
border-style: solid;
border-left-width: 15px;
}
.elem6
{
padding: 10px;
border-style: solid;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style BorderLeftWidth
DOM
</b>
<br>
<br>
<div id="parent6">
<p class="elem6">
Blog TIK merupakan portal ilmu
komputer yang digunakan untuk
mempelajari berbagai materi
seputar pemrograman komputer
dan juga materi lainnya yang
sedang populer saat ini.
</p>
</div>
<br>
<button
onclick="changeWidth()">
Change BorderLeftWidth
</button>
<!-- Script untuk mengubah
BorderLeftWidth -->
<script>
function changeWidth()
{
elem5 = document.querySelector('.elem6');
elem5.style.borderLeftWidth = 'inherit';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti Style BorderLeftWidth DOMBlog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi seputar pemrograman komputer dan juga materi lainnya yang sedang populer saat ini.
- 6 Nilai Properti borderRightWidth Style DOM pada HTML [klik]
- 3 Value Properti borderSpacing Style DOM pada HTML [klik]
- 12 Value Properti borderStyle Style DOM pada HTML [klik]
- 5 Value Properti borderTop Style DOM pada HTML [klik]
- 3 Contoh Properti borderTopColor Style DOM pada HTML [klik]
- 6 Contoh Properti borderTopLeftRadius Style DOM pada HTML [klik]
- 6 Contoh Properti borderTopRightRadius Style DOM pada HTML [klik]
5 komentar untuk "Mengatur Batas Lebar Kiri HTML Menggunakan borderLeftWidth 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 borderLeftWidth Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti borderLeftWidth Style DOM pada HTML:
Hapus1. Google Chrome
2. Internet Explorer
3. Firefox
4. Opera
5. Apple Safari
Apa yang dimaksud dengan properti borderLeftWidth DOM pada HTML?
BalasHapusProperti borderLeftWidth DOM pada HTML berfungsi untuk menetapkan atau mengembalikan nilai lebar dari borderLeft elemen pada dokumen HTML.
HapusProperti borderLeftWidth DOM pada HTML berfungsi untuk mengatur atau mendapatkan nilai lebar dari borderLeft atau nilai batas kiri untuk suatu elemen pada dokumen HTML.
Hapus