Pinned

Home / html / Mengatur Lebar Batas Atas HTML Menggunakan borderTopWidth Style DOM

Mengatur Lebar Batas Atas HTML Menggunakan borderTopWidth Style DOM

6/19/2022 12:29:00 PM
Properti borderTopWidth Style DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mengembalikan nilai lebar dari top border suatu elemen pada dokumen HTML.

6 Contoh Properti borderTopWidth Style DOM pada HTML
Ilustrasi borderTopWidth Style DOM

Sebelum memahami lebih dalam materi tentang Mengatur Lebar Batas Atas HTML Menggunakan borderTopWidth Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Batas Atas HTML Menggunakan borderTopStyle DOM [klik], Mengatur Batas Radius HTML borderTopRightRadius Style DOM [klik], dan Mengatur Batas Radius HTML Menggunakan borderTopLeftRadius Style DOM [klik].

Sintak:
  • digunakan untuk mendapatkan nilai properti borderTopWidth: object.style.borderTopWidth
  • digunakan untuk mengatur nilai properti borderTopWidth: object.style.borderTopWidth = "thin|medium|thick|length|initial|inherit"

Return Values: berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan nilai lebar dari elemen top border.

Baca Juga:

Property Values:
  • thin: digunakan untuk mendefinisikan sebuah top border thin.
  • medium: digunakan untuk mendefinisikan sebuah top border medium, dan sekaligus merupakan nilai default dari properti borderTopWidth.
  • thick: digunakan untuk mendefinisikan sebuah top border thick.
  • length: digunakan untuk mendefinisikan lebar dari top border dalam satuan ukur length.
  • initial: digunakan untuk mengatur nilai properti ke nilai default-nya.
  • inherit: digunakan untuk menerima nilai turunan properti dari nilai parent.

Contoh:

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style BorderTopWidth 

DOM

</title>

 

<style>

.elem1 

{

border-style: solid;

padding: 10px;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style BorderTopWidth 

DOM

</b>

 

<p class="elem1">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai ilmu 

pemrograman dan materi TIK 

lainnya yang sedang populer 

saat ini.

</p>

 

<button 

onclick="changeWidth()">

Change borderTopWidth

</button>

 

<!-- Script untuk mengubah 

borderTopWidth -->

<script>

function changeWidth() 

{

elem1 = document.querySelector('.elem1');

elem1.style.borderTopWidth = 'thin';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style BorderTopWidth DOM

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



Contoh:

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style BorderTopWidth 

DOM

</title>

 

<style>

.elem2 

{

border: thick solid;

padding: 10px;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style BorderTopWidth 

DOM

</b>

 

<p class="elem2">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

pemrograman dan materi TIK 

lainnya yang sedang populer 

saat ini.

</p>

 

<button 

onclick="changeWidth()">

Change borderTopWidth

</button>

 

<!-- Script untuk mengubah 

borderTopWidth -->

<script>

function changeWidth() 

{

elem2 = document.querySelector('.elem2');

elem2.style.borderTopWidth = 'medium';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style BorderTopWidth DOM

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



Contoh:

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style BorderTopWidth 

DOM

</title>

 

<style>

.elem3 

{

border-style: solid;

padding: 10px;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style BorderTopWidth 

DOM

</b>

 

<p class="elem3">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai ilmu 

pemrograman komputer materi

TIK lainnya yang sedang 

populer saat ini.

</p>

 

<button 

onclick="changeWidth()">

Change borderTopWidth

</button>

 

<!-- Script untuk mengubah 

borderTopWidth -->

<script>

function changeWidth() 

{

elem3 = document.querySelector('.elem3');

elem3.style.borderTopWidth = 'thick';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style BorderTopWidth DOM

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



Contoh:

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style BorderTopWidth 

DOM

</title>

 

<style>

.elem4 

{

border-style: solid;

padding: 10px;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style BorderTopWidth 

DOM

</b>

 

<p class="elem4">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

pemrograman dan materi TIK 

lainnya yang sedang populer 

saat ini.

</p>

 

<button 

onclick="changeWidth()">

Change borderTopWidth

</button>

 

<!-- Script untuk mengubah 

borderTopWidth -->

<script>

function changeWidth() 

{

elem4 = document.querySelector('.elem4');

elem4.style.borderTopWidth = '10px';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style BorderTopWidth DOM

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



Contoh:

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style BorderTopWidth 

DOM

</title>

 

<style>

.elem5 

{

border-style: solid;

padding: 10px;

border-top-width: 2px;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Proerti Style BorderTopWidth 

DOM

</b>

 

<p class="elem5">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

tentang pemrograman dan materi 

TIK lainnya yang sedang 

populer saat ini.

</p>

 

<button 

onclick="changeWidth()">

Change borderTopWidth

</button>

 

<!-- Script untuk mengubah 

borderTopWidth -->

<script>

function changeWidth() 

{

elem5 = document.querySelector('.elem5');

elem5.style.borderTopWidth = 'initial';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Proerti Style BorderTopWidth DOM

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



Contoh:

<!DOCTYPE html>

<html lang="en">

 

<head>

 

<title>

Properti Style BorderTopWidth 

DOM

</title>

 

<style>

#parent 

{

padding: 10px;

border-style: solid;

/* Pengaturan borderTopWidth 

dari nilai parent */

border-top-width: 15px;

}

 

.elem6 

{

border-style: solid;

padding: 10px;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style BorderTopWidth 

DOM

</b>

 

<br>

<br>

 

<div id="parent">

<p class="elem6">

Blog TIK merupakan portal ilmu 

komputer yang digunakan untuk 

mempelajari berbagai materi 

pemrograman dan materi TIK 

lainnya yang sedang populer 

saat ini.

</p>

</div>

 

<br>

 

<button 

onclick="changeWidth()">

Change borderTopWidth

</button>

 

<!-- Script untuk mengubah 

borderTopWidth -->

<script>

function changeWidth() 

{

elem6 = document.querySelector('.elem6');

elem6.style.borderTopWidth = 'inherit';

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style BorderTopWidth DOM

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



Artikel ini didedikasikan kepada: Muchammad Syaifur Rohim, Muhammad Burhannudin, Muhammad Iqbal Nurfaidzi Gustian, Muhammad Maulana, dan Mustika Rini.

5 komentar:

  1. AnonimMinggu, 19 Juni 2022 pukul 12.31.00 WIB

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

    BalasHapus
    Balasan
    1. AnonimMinggu, 19 Juni 2022 pukul 12.31.00 WIB

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

      Hapus
  2. AnonimSenin, 27 Juni 2022 pukul 07.15.00 WIB

    Apa yang dimaksud dengan properti boderTopWidth Style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimSenin, 27 Juni 2022 pukul 07.15.00 WIB

      Properti borderTopWidth Style DOM pada HTML merupakan properti yang digunakan untuk menetapkan atau mengembalikan nilai lebar batas atas dari suatu elemen pada dokumen HTML.

      Hapus
    2. AnonimSenin, 27 Juni 2022 pukul 07.16.00 WIB

      Properti HTML DOM borderTopWidth digunakan untuk mengatur atau mendapatkan nilai lebar batas atas untuk sebuah elemen pada dokumen HTML.

      Hapus

Hubungi admin melalui Wa : +62-896-2514-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 come from small things -

Langganan: Posting Komentar ( Atom )