Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengatur Kotak Ukuran HTML Menggunakan boxSizing Style DOM

Properti boxSizing Style DOM pada HTML digunakan untuk mengatur atau mengembalikan bagaimana cara suatu object harus diciptakan agar bersesuaian dengan elemen yang diambil sebagai pertimbangan untuk nilai padding, border, dan content. Properti boxSizing sangat berguna ketika digunakan untuk menyesuaikan elemen berdasarkan posisinya, dimana properti ini secara otomatis akan mengkalkulasi nilai dimensinya.

4 Contoh Properti boxSizing Style DOM pada HTML
Ilustrasi boxSizing DOM

Sebelum memahami lebih dalam materi tentang Mengatur Kotak Ukuran HTML Menggunakan boxSizing Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Bayangan Kotak HTML Menggunakan boxShadow Style DOM [klik], Mengatur Batas Lebar HTML Menggunakan borderWidth Style DOM [klik], dan Mengatur Lebar Batas Atas HTML Menggunakan borderTopWidth Style DOM [klik].

Sintak:
  • berfungsi untuk mengembalikan nilai properti boxSizing: object.style.boxSizing
  • berfungsi untuk menentukan nilai properti boxSizing: object.style.boxSizing = "border-box|content-box|initial|inherit"

Return Values: digunakan untuk mengembalikan sebuah nilai string, yang merepresentasikan nilai properti boxSizing dari suatu elemen.

Baca Juga:

Property Values:
  • border-box: nilai ini digunakan untuk melakukan padding atau memberikan border spesifik dari suatu elemen, termasuk penyesuaian ukuran gambar baik untuk ukuran panjang ataupun ukuran lebar. Nilai dimensi dari konten akan dikalkulasi oleh nilai subtraksi border dari ukuran properti 'width' dan 'height' yang telah ditentukan sebelumnya dari suatu elemen yang dipengaruhi oleh nilai properti boxSizing tersebut.
  • content-box: nilai ini digunakan untuk menentukan ukuran width dan height yang diterapkan pada content-box dari suatu elemen. Setiap padding dan border yang telah ditentukan pada elemen akan ditambahkan dan digambarkan diluar dimensi spesifik dari box atau kotaknya. Nilai content-box merupakan nilai default dari properti boxSizing.
  • initial: digunakan untuk mengatur nilai properti boxSizing ke nilai default-nya.
  • inherit: digunakan untuk menerima nilai turunan properti dari nilai parent.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style box1Sizing DOM

</title>

 

<style>

.container1 

{

width: 200px;

height: 300px;

border: 10px solid green;

}

 

.box1 

{

width: 200px;

height: 100px;

border: 5px solid lightgreen;

text-align: center;

font-size: 2rem;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style boxSizing DOM

</b>

 

<p>

Elemen container1 memiliki 

nilai height sebesar 500px dan 

nilai width sebesar 200px.

<br>

Sedangkan box1 yang berada 

didalamnya memiliki nilai 

height sebesar 100px dan nilai 

width sebesar 200px.

</p>

 

<div 

class="container1">

 

<div 

class="box1"

id="box1-1">

Makan

</div>

 

<div 

class="box1"

id="box1-2"

style="padding: 10px;">

Dan

</div>

 

<div 

class="box1"

id="box1-3">

Minum

</div>

 

</div>

 

<p>

Klik tombol untuk mengatur 

properti boxSizing dari tiga 

box1 menjadi border-box1.

</p>

 

<button 

onclick="setBox1Sizing()">

Change boxSizing

</button>

 

<script>

function setBoxSizing() 

{

document.getElementById(

"box1-1").style.box1Sizing =

"border-box1";

 

document.getElementById(

"box1-2").style.box1Sizing =

"border-box1";

 

document.getElementById(

"box1-3").style.box1Sizing =

"border-box1";

}

</script>

 

</body>

 

</html>


Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style boxSizing DOM

</title>

 

<style>

.container 

{

width: 200px;

height: 300px;

border: 10px solid green;

}

 

.box 

{

width: 200px;

height: 100px;

border: 5px solid lightgreen;

text-align: center;

font-size: 2rem;

box-sizing: border-box;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style boxSizing DOM

</b>

 

<p>

Elemen container memiliki 

nilai height sebesar 500px dan 

nilai width sebesar 200px.

<br>

Sedangkang box yang berada 

didalamnya memiliki nilai 

height sebesar 100px dan nilai 

width sebesar 200px.

</p>

 

<div 

class="container">

 

<div 

class="box"

id="box-1">

Makan

</div>

 

<div 

class="box"

id="box-2"

style="padding: 10px;">

Dan

</div>

 

<div 

class="box"

id="box-3">

Makan

</div>

 

</div>

 

<p>

Klik tombol untuk mengatur 

properti boxSizing dari tiga 

box menjadi content-box.

</p>

 

<button 

onclick="setBoxSizing()">

Change boxSizing

</button>

 

<script>

function setBoxSizing() 

{

document.getElementById(

"box-1").style.boxSizing = "content-box";

 

document.getElementById(

"box-2").style.boxSizing = "content-box";

 

document.getElementById(

"box-3").style.boxSizing = "content-box";

}

</script>

 

</body>

 

</html>


Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style boxSizing DOM

</title>

 

<style>

.container 

{

width: 200px;

height: 300px;

border: 10px solid green;

}

 

.box 

{

width: 200px;

height: 100px;

border: 5px solid lightgreen;

text-align: center;

font-size: 2rem;

box-sizing: border-box;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style boxSizing DOM

</b>

 

<p>

Elemen container memiliki 

nilai height sebesar 500px dan 

nilai width sebesar 200px.

<br>

Sedangkan nilai box didalamnya 

memiliki nilai height sebesar 

100px dan nilai width sebesar 

200px.

</p>

 

<div 

class="container">

 

<div 

class="box"

id="box-1">

Makan

</div>

 

<div 

class="box"

id="box-2"

style="padding: 10px;">

Dan

</div>

 

<div 

class="box"

id="box-3">

Makan

</div>

 

</div>

 

<p>

Klik tombol untuk mengatur 

properti boxSizing dari tiga 

box ke initial.

</p>

 

<button 

onclick="setBoxSizing()">

Change boxSizing

</button>

 

<script>

function setBoxSizing() 

{

document.getElementById(

"box-1").style.boxSizing = "initial";

 

document.getElementById(

"box-2").style.boxSizing = "initial";

 

document.getElementById(

"box-3").style.boxSizing = "initial";

}

</script>

 

</body>

 

</html>


Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style boxSizing DOM

</title>

 

<style>

.container 

{

width: 200px;

height: 300px;

border: 10px solid green;

/* style ini bertindak sebagai 

parent */

box-sizing: border-box;

}

 

.box 

{

width: 200px;

height: 100px;

border: 5px solid lightgreen;

text-align: center;

font-size: 2rem;

}

</style>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

Properti Style boxSizing DOM

</b>

 

<p>

Elemen container memiliki 

nilai height sebesar 500px dan 

nilai width sebesar 200px.

<br>

Nilai box didalamnya memiliki 

nilai height sebesar 100px dan 

nilai width sebesar 200px.

</p>

 

<div 

class="container">

 

<div 

class="box"

id="box-1">

Makan

</div>

 

<div 

class="box"

id="box-2"

style="padding: 10px;">

Dan

</div>

 

<div 

class="box"

id="box-3">

Minum

</div>

 

</div>

 

<p>

Klik tombol untuk mengatur 

properti boxSizing dari tiga 

box menjadi tipe inherit.

</p>

 

<button 

onclick="setBoxSizing()">

Change boxSizing

</button>

 

<script>

function setBoxSizing() 

{

document.getElementById(

"box-1").style.boxSizing = "inherit";

 

document.getElementById(

"box-2").style.boxSizing = "inherit";

 

document.getElementById(

"box-3").style.boxSizing = "inherit";

}

</script>

 

</body>

 

</html>


Artikel ini didedikasikan kepada: Muhammad Maulana, Mustika Rini, Nabila Astri Ariyana, Nadia Rizki Rahmadani, dan Nicholas Valentino Febrianto.

5 komentar untuk "Mengatur Kotak Ukuran HTML Menggunakan boxSizing Style DOM"

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

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

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

    BalasHapus
    Balasan
    1. Properti boxSizing Style DOM pada HTML memungkinkan user untk menentukan elemen tertentu agar sesuai dengan area tertentu melalui berbagai cara.

      Hapus
    2. Contoh, jika user memiliki dua box yang saling berbatasan dan saling berdampingan posisinya, hal tersebut dapat dicapai dengan menggunakan pengaturan boxSizing ke border-box. Proses ini akan memaksa browser untuk melakukan render kotak dengan nilai lebar dan tinggi yang telah ditentukan sebelumnya, dan juga dapat digunakan untuk menempatkan batas dan padding dalam kotak tersebut.

      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 -