Mengatur Kotak Ukuran HTML Menggunakan boxSizing Style DOM
- 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.
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>
<!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>
<!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>
- 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]
- 12 Value Properti columnRuleStyle DOM pada HTML [klik]
- 6 Value Properti columnRuleWidth Style DOM pada HTML [klik]
5 komentar untuk "Mengatur Kotak Ukuran HTML Menggunakan boxSizing 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 boxSizing Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti boxSizing Style DOM pada HTML:
Hapus1. Google Chrome
2. Internet Explorer
3. Firefox
4. Opera
5. Apple Safari
Apa yang dimaksud dengan properti boxSizing Style DOM pada HTML?
BalasHapusProperti boxSizing Style DOM pada HTML memungkinkan user untk menentukan elemen tertentu agar sesuai dengan area tertentu melalui berbagai cara.
HapusContoh, 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