Mengatur Batas HTML Menggunakan borderStyle Style DOM
- mendapatkan nilai borderStyle: object.style.borderStyle
- mengatur nilai borderStyle: object.style.borderStyle = "none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit"
Return Values: berfungsi untuk mengembalikan sebuah nilai string, yang merepresentasikan style dari elemen border.
Property Values: setiap nilai properti diperlihatkan sebagai berikut.
- none: tidak menciptakan border apapun, yang merupakan nilai default dari properti.
- hidden: memiliki fungsi visual yang hampir sama dengan value 'none', kecuali digunakan untuk membantuk konflik resolusi border pada elemen table.
- dotted: penggunaan baris dot sebagai border.
- dashed: penggunaan baris dashed sebagai border.
- solid: penggunaan baris solid sebagai border.
- double: dua baris digunakan sebagai border.
- groove: menampilkan border 3D grooved, dimana efeknya bergantung pada nilai border-color.
- ridge: menampilkan border 3D ridged, dimana efeknya bergantung pada nilai border-color.
- inset: menampilkan border 3D inset, dimana efeknya bergantung pada nilai border-color.
- outset: menampilkan border 3D outset, dimana efeknya bergantung pada nilai border-color.
- initial: mengatur nilai properti ke nilai initial.
- inherit: mengatur nilai properti turunan dari nilai parent.
Nilai dari properti borderStyle diperlihatkan sebagai berikut.
Contoh: penggunaan nilai none.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Properti Style borderStyle DOM
</title>
<style>
.item
{
padding: 10px;
border: 15px solid green;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style borderStyle DOM
</b>
<p class="item">
Blog TIK merupakan portal ilmu
komputer yang digunakan untuk
mempelajari berbagai materi
pemrograman dan materi lainnya
seputar ilmu komputer dan
dunia sekolah.
</p>
<button
onclick="changeBorderStyle()">
Change style
</button>
<script>
function changeBorderStyle()
{
elem = document.querySelector('.item');
// Pengaturan border style
elem.style.borderStyle = 'none';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti Style borderStyle DOMBlog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi pemrograman dan materi lainnya seputar ilmu komputer dan dunia sekolah.
Contoh: penggunaan nilai hidden.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Properti Style borderStyle DOM
</title>
<style>
.item2
{
padding: 10px;
border: 15px solid green;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style borderStyle DOM
</b>
<p class="item2">
Blog TIK merupakan portal ilmu
komputer yang digunakan untuk
mempelajari berbagai materi
seputar ilmu pemrograman dan
materi lainnya yang berkaitan
dengan dunia TIK.
</p>
<button
onclick="changeBorderStyle()">
Change style
</button>
<script>
function changeBorderStyle()
{
elem = document.querySelector('.item2');
// pengaturan border style
elem.style.borderStyle = 'hidden';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti Style borderStyle DOMBlog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi seputar ilmu pemrograman dan materi lainnya yang berkaitan dengan dunia TIK.
Contoh: penggunaan nilai dotted.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Properti Style borderStyle DOM
</title>
<style>
.item3
{
padding: 10px;
border: 15px solid green;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style borderStyle DOM
</b>
<p class="item3">
Blog TIK merupakan portal ilmu
komputer yang digunakan untuk
mempelajari berbagai materi
tentang ilmu pemrograman dan
materi lainnya seputar ilmu
komputer yang sedang populer
saat ini.
</p>
<button
onclick="changeBorderStyle()">
Change style
</button>
<script>
function changeBorderStyle()
{
elem = document.querySelector('.item3');
// Pengaturan border style
elem.style.borderStyle = 'dotted';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti Style borderStyle DOMBlog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi tentang ilmu pemrograman dan materi lainnya seputar ilmu komputer yang sedang populer saat ini.
Contoh: penggunaan nilai dash.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Properti Style borderStyle DOM
</title>
<style>
.item4
{
padding: 10px;
border: 15px solid green;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style borderStyle DOM
</b>
<p class="item4">
Blog TIK merupakan portal ilmu
komputer yang digunakan untuk
mempelajari berbagai materi
seputar ilmu pemrograman dan
materi TIK lainnya yang sedang
populer saat ini.
</p>
<button
onclick="changeBorderStyle()">
Change style
</button>
<script>
function changeBorderStyle()
{
elem = document.querySelector('.item4');
// Pengaturan border style
elem.style.borderStyle = 'dashed';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti Style borderStyle DOMBlog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi seputar ilmu pemrograman dan materi TIK lainnya yang sedang populer saat ini.
Contoh: penggunaan nilai solid.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Properti Style borderStyle DOM
</title>
<style>
.item5
{
padding: 10px;
border: 15px dotted green;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style borderStyle DOM
</b>
<p
class="item5">
Blog TIK merupakan portal ilmu
komputer yang digunakan untuk
mempelajari berbagai materi
pemrograman komputer dan ilmu
TIK lainnya yang sedang
populer saat ini.
</p>
<button
onclick="changeBorderStyle()">
Change style
</button>
<script>
function changeBorderStyle()
{
elem = document.querySelector('.item5');
// Pengaturan border style
elem.style.borderStyle = 'solid';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti Style borderStyle DOMBlog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi pemrograman komputer dan ilmu TIK lainnya yang sedang populer saat ini.
Contoh: penggunaan nilai double.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Properti Style borderStyle DOM
</title>
<style>
.item6
{
padding: 10px;
border: 15px solid green;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style borderStyle DOM
</b>
<p class="item6">
Blog TIK merupakan portal ilmu
komputer yang digunakan untuk
mempelajari berbagai materi
pemrograman komputer dan
materi TIK lainnya yang sedang
populer saat ini.
</p>
<button
onclick="changeBorderStyle()">
Change style
</button>
<script>
function changeBorderStyle()
{
elem = document.querySelector('.item6');
// Pengaturan border style
elem.style.borderStyle = 'double';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti Style borderStyle DOMBlog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi pemrograman komputer dan materi TIK lainnya yang sedang populer saat ini.
Contoh: penggunaan nilai groove.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Properti Style borderStyle DOM
</title>
<style>
.item7
{
padding: 10px;
border: 15px solid green;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style borderStyle DOM
</b>
<p class="item7">
Blog TIK merupakan portal ilmu
komputer yang digunakan untuk
mempelajari berbagai materi
seputar pemrograman dan ilmu
komputer lainnya yang sedang
populer saat ini.
</p>
<button
onclick="changeBorderStyle()">
Change style
</button>
<script>
function changeBorderStyle()
{
elem = document.querySelector('.item7');
// Pengaturan border style
elem.style.borderStyle = 'groove';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti Style borderStyle DOMBlog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi seputar pemrograman dan ilmu komputer lainnya yang sedang populer saat ini.
Contoh: penggunaan nilai ridge.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Properti Style borderStyle DOM
</title>
<style>
.item8
{
padding: 10px;
border: 15px solid green;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style borderStyle DOM
</b>
<p class="item8">
Blog TIK merupakan portal ilmu
komputer yang digunakan untuk
mempelajari berbagai materi
seputar pemrograman dan ilmu
komputer atau TIK lainnya yang
sedang populer saat ini.
</p>
<button
onclick="changeBorderStyle()">
Change style
</button>
<script>
function changeBorderStyle()
{
elem = document.querySelector('.item8');
// Pengaturan border style
elem.style.borderStyle = 'ridge';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti Style borderStyle DOMBlog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi seputar pemrograman dan ilmu komputer atau TIK lainnya yang sedang populer saat ini.
Contoh: penggunaan nilai inset.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Properti Style borderStyle DOM
</title>
<style>
.item9
{
padding: 10px;
border: 15px solid green;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style borderStyle DOM
</b>
<p class="item9">
Blog TIK merupakan portal ilmu
komputer yang digunakan untuk
mempelajari berbagai materi
pemrograman dan ilmu TIK
lainnya yang sedang populer
saat ini.
</p>
<button
onclick="changeBorderStyle()">
Change style
</button>
<script>
function changeBorderStyle()
{
elem = document.querySelector('.item9');
// Pengaturan border style
elem.style.borderStyle = 'inset';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti Style borderStyle DOMBlog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi pemrograman dan ilmu TIK lainnya yang sedang populer saat ini.
Contoh: penggunaan nilai outset.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Properti Style borderStyle DOM
</title>
<style>
.item10
{
padding: 10px;
border: 15px inset green;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style borderStyle DOM
</b>
<p class="item10">
Blog TIK merupakan portal ilmu
komputer yang digunakan untuk
mempelajari berbagai materi
pemrograman komputer dan ilmu
TIK lainnya yang saat ini
sedang populer.
</p>
<button
onclick="changeBorderStyle()">
Change style
</button>
<script>
function changeBorderStyle()
{
elem = document.querySelector('.item10');
// Pengaturan border style
elem.style.borderStyle = 'outset';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti Style borderStyle DOMBlog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi pemrograman komputer dan ilmu TIK lainnya yang saat ini sedang populer.
Contoh: penggunaan nilai initial.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Properti Style borderStyle DOM
</title>
<style>
.item11
{
padding: 10px;
border: 15px solid green;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style borderStyle DOM
</b>
<p class="item11">
Blog TIK merupakan portal ilmu
komputer yang digunakan untuk
mempelajari berbagai materi
pemrograman dan ilmu tik
lainnya yang sedang populer
saat ini.
</p>
<button
onclick="changeBorderStyle()">
Change style
</button>
<script>
function changeBorderStyle()
{
elem = document.querySelector('.item11');
// Pengaturan border style
elem.style.borderStyle = 'initial';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti Style borderStyle DOMBlog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi pemrograman dan ilmu tik lainnya yang sedang populer saat ini.
Contoh: penggunaan nilai inherit.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Properti Style borderStyle DOM
</title>
<style>
#parent
{
border-style: dotted;
padding: 10px;
}
.item12
{
padding: 10px;
border: 15px solid green;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style borderStyle DOM
</b>
<div id="parent">
<p class="item12">
Blog TIK merupakan portal ilmu
komputer yang berisi berbagai
materi seputar ilmu
pemrograman dan ilmu lainnya
yang sedang populer saat ini.
</p>
</div>
<button
onclick="changeBorderStyle()">
Change style
</button>
<script>
function changeBorderStyle()
{
elem = document.querySelector('.item12');
// Pengaturan border style
elem.style.borderStyle = 'inherit';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti Style borderStyle DOMBlog TIK merupakan portal ilmu komputer yang berisi berbagai materi seputar ilmu pemrograman dan ilmu lainnya yang sedang populer saat ini.
- 12 Contoh Properti borderTopStyle DOM pada HTML
- 6 Contoh Properti borderTopWidth Style DOM pada HTML
- 6 Contoh Properti borderWidth Style DOM pada HTML
- 8 Value Properti boxShadow Style DOM pada HTML
- 4 Contoh Properti boxSizing Style DOM pada HTML
- 4 Contoh Properti captionSide Style DOM pada HTML
- 6 Value Properti Clear Style DOM pada HTML
5 komentar untuk "Mengatur Batas HTML Menggunakan borderStyle 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 borderStyle DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti borderStyle DOM pada HTML:
Hapus1. Google Chrome
2. Internet Explorer
3. Firefox
4. Opera
5. Apple Safari
Apa yang dimaksud dengan properti borderStyle DOM pada HTML?
BalasHapusProperti borderStyle digunakan untuk mengatur atau mengembalikan nilai style dari border atau batas elemen. Properti borderStyle juga dapat digunakan untuk mengambil lebih dari satu atau hingga empat nilai sekaligus.
HapusProperti borderStyle DOM pada HTML digunakan sebagai suatu singkatan yang digunakan untuk mendapatkan atau mengatur nilai properti style batas dari suatu elemen.
Hapus