Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengatur Batas Lebar Kiri HTML Menggunakan borderLeftWidth Style DOM

Properti borderLeftWidth Style DOM pada HTML digunakan untuk mengatur atau mengembalikan nilai width left border dari suatu elemen.


Sebelum memahami lebih dalam materi tentang Mengatur Batas Lebar Kiri HTML Menggunakan borderLeftWidth Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Border Kiri HTML Menggunakan borderLeftStyle DOM [klik], Mengatur Batas Kiri Warna HTML Menggunakan borderLeftColor Style DOM [klik], dan Mengatur Batas Kiri HTML Menggunakan borderLeft Style DOM [klik].

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

Baca Juga:

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>

 

<

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 BorderLeftWidth

Blog 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>

 

<

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 BorderLeftWidth

Blog 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>

 

<

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>

Output:

Blog Elfan

Properti DOM Style BorderLeftWidth

Blog 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>

 

<

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 DOM

Blog 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>

 

<

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 DOM

Blog 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 DOM

Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi seputar pemrograman komputer dan juga materi lainnya yang sedang populer saat ini.



Artikel ini didedikasikan kepada: Ismatul Maula, Isnaeni Estu Romandhoni, Izza Alya Fatma, Izzani Salsabillah, dan Laelatul Khasanah.

5 komentar untuk "Mengatur Batas Lebar Kiri HTML Menggunakan borderLeftWidth Style DOM"

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

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti borderLeftWidth Style DOM pada HTML:
      1. Google Chrome
      2. Internet Explorer
      3. Firefox
      4. Opera
      5. Apple Safari

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

    BalasHapus
    Balasan
    1. Properti borderLeftWidth DOM pada HTML berfungsi untuk menetapkan atau mengembalikan nilai lebar dari borderLeft elemen pada dokumen HTML.

      Hapus
    2. Properti borderLeftWidth DOM pada HTML berfungsi untuk mengatur atau mendapatkan nilai lebar dari borderLeft atau nilai batas kiri untuk suatu elemen pada dokumen HTML.

      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 -
- Big things start from small things -