Mengatur Border Kiri HTML Menggunakan borderLeftStyle DOM
- berfungsi untuk mengembalikan nilai properti borderLeftStyle: object.style.borderTopStyle
- berfungsi untuk mengatur nilai properti borderLeftStyle: object.style.borderLeftStyle = "none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit"
Value Properti:
- none: berfungsi untuk meniadakan border, dan merupakan nilai default dari properti borderLeftStyle.
- hidden: berfungsi sama seperti properti 'none', kecuali digunakan untuk membantu selama border mengalami conflict resolution dalam tabel elemen.
- dotted: digunakan sebagai bentuk border titik-titik.
- dashed: digunakan untuk menampilkan garis dashed sebagai border.
- solid: digunakan untuk menampilkan sebuah baris solid tunggal sebagai border.
- double: digunakan untuk menampilkan dua baris sebagai border.
- groove: digunakan untuk menampilkan border groove 3D, dengan efek yang muncul adalah bergantung pada nilai border-color.
- ridge: digunakan untuk menampilkan border ridge 3D, dengan efek yang muncul adalah bergantung pada nilai border-color.
- inset: digunakan untuk menampilkan border inset 3D, dengan efek yang muncul adalah bergantung pada nilai border-color.
- outset: digunakan untuk menampilkan border outset 3D, dengan efek yang muncul adalah bergantung pada nilai border-color.
- initial: mengatur nilai properti ke nilai initial.
- inherit: mengatur nilai properti ke nilai turunannya yang berasal dari nilai parent.
Return Values: berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan style dari elemen left border.
Contoh: mendeskripsikan nilai properti none.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style borderLeftStyle
DOM
</title>
<style>
.item
{
padding: 10px;
border: 15px solid green;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti DOM Style
borderLeftStyle
</b>
<p class="item">
Blog TIk merupakan portal ilmu
komputer dengan variasi besar
yang dapat digunakan untuk
penjelaskan berbagai ilmu
komputer dan berbagai macam
artikel pemrograman lainnya.
</p>
<button
onclick="changeBorderStyle()">
Change style
</button>
<script>
function changeBorderStyle()
{
elem = document.querySelector('.item');
// Pengaturan border style
elem.style.borderLeftStyle = 'none';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti DOM Style borderLeftStyleBlog TIk merupakan portal ilmu komputer dengan variasi besar yang dapat digunakan untuk penjelaskan berbagai ilmu komputer dan berbagai macam artikel pemrograman lainnya.
Contoh: mendeskripsikan nilai properti hidden.
<!DOCTYPE html>
<html>
<head>
<title>
Properti DOM Style
borderLeftStyle
</title>
<style>
.item1
{
padding: 10px;
border: 15px solid green;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti DOM Style
borderLeftStyle
</b>
<p
class="item1">
Blog TIK merupakan portal ilmu
komputer yang digunakan untuk
mempelajari berbagai ilmu
pemrograman.
</p>
<button
onclick="changeBorderStyle()">
Change style
</button>
<script>
function changeBorderStyle()
{
elem = document.querySelector('.item1');
// Pengaturan border style
elem.style.borderLeftStyle = 'hidden';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti DOM Style borderLeftStyleBlog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai ilmu pemrograman.
Contoh: mendeskripsikan nilai properti dotted.
<!DOCTYPE html>
<html>
<head>
<title>
Properti DOM Style
borderLeftStyle
</title>
<style>
.item2
{
padding: 10px;
border: 15px solid green;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti DOM Style
borderLeftStyle
</b>
<p
class="item2">
Blog TIK merupakan portal ilmu
komputer yang digunakan untuk
mempelajari berbagai ilmu
pemrograman.
</p>
<button
onclick="changeBorderStyle()">
Change style
</button>
<script>
function changeBorderStyle()
{
elem = document.querySelector('.item2');
// Pengaturan border style
elem.style.borderLeftStyle = 'dotted';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti DOM Style borderLeftStyleBlog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai ilmu pemrograman.
Contoh: mendeskripsikan nilai properti dashed.
<!DOCTYPE html>
<html>
<head>
<title>
Properti DOM Style
borderLeftStyle
</title>
<style>
.item3
{
padding: 10px;
border: 15px solid green;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog elfan
</h1>
<b>
Properti Style borderLeftStyle
DOM
</b>
<p class="item3">
Blog TIK merupakan portal ilmu
komputer yang digunakan untuk
mempelajari berbagai ilmu
komputer.
</p>
<button
onclick="changeBorderStyle()">
Change style
</button>
<script>
function changeBorderStyle()
{
elem = document.querySelector('.item3');
// Pengaturan border style
elem.style.borderLeftStyle = 'dashed';
}
</script>
</body>
</html>
Output:Blog elfan
Properti Style borderLeftStyle DOMBlog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai ilmu komputer.
Contoh: mendeskripsikan nilai properti solid.
<!DOCTYPE html>
<html>
<head>
<title>
Properti DOM Style
borderLeftStyle
</title>
<style>
.item4
{
padding: 10px;
border: 15px dotted green;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti DOM Style
borderLeftStyle
</b>
<p
class="item4">
Blog TIK merupakan portal ilmu
komputer yang digunakan untuk
mempelajari berbagai ilmu
pemrograman yang ada saat ini.
</p>
<button
onclick="changeBorderStyle()">
Change style
</button>
<script>
function changeBorderStyle()
{
elem = document.querySelector('.item4');
// Pengaturan border style
elem.style.borderLeftStyle = 'solid';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti DOM Style borderLeftStyleBlog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai ilmu pemrograman yang ada saat ini.
Contoh: mendeskripsikan nilai properti double.
<!DOCTYPE html>
<html>
<head>
<title>
Properti DOM Style
borderLeftStyle
</title>
<style>
.item5
{
padding: 10px;
border: 15px solid green;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti DOM Style
borderLeftStyle
</b>
<p
class="item5">
Blog TIK berfungsi untuk
mempelajari berbagai ilmu
komputer dan berbagai macam
ilmu populer lainnya dalam
dunia TIK.
</p>
<button onclick="changeBorderStyle()">
Change style
</button>
<script>
function changeBorderStyle()
{
elem = document.querySelector('.item5');
// Pengaturan border style
elem.style.borderLeftStyle = 'double';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti DOM Style borderLeftStyleBlog TIK berfungsi untuk mempelajari berbagai ilmu komputer dan berbagai macam ilmu populer lainnya dalam dunia TIK.
Contoh: mendeskripsikan nilai properti groove.
<!DOCTYPE html>
<html>
<head>
<title>
Properti DOM Style
borderLeftStyle
</title>
<style>
.item6
{
padding: 10px;
border: 15px solid green;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti DOM Style
borderLeftStyle
</b>
<p
class="item6">
Blog TIK merupakan portal ilmu
komputer yang digunakan untuk
mempelajari berbagai ilmu
pemrograman yang sedang
populer saat ini.
</p>
<button
onclick="changeBorderStyle()">
Change style
</button>
<script>
function changeBorderStyle()
{
elem = document.querySelector('.item6');
// Pengaturan border style
elem.style.borderLeftStyle = 'groove';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti DOM Style borderLeftStyleBlog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai ilmu pemrograman yang sedang populer saat ini.
Contoh: mendeskripsikan nilai properti ridge.
<!DOCTYPE html>
<html>
<head>
<title>
Properti DOM Style
borderLeftStyle
</title>
<style>
.item7
{
padding: 10px;
border: 15px solid green;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti DOM Style
borderLeftStyle
</b>
<p
class="item7">
Blog TIK merupakan portal ilmu
komputer merupakan blog
pemrograman yang digunakan
untuk mempelajari berbagai
materi pemrograman dan
beberapa materi lain seputar
ilmu komputer.
</p>
<button
onclick="changeBorderStyle()">
Change style
</button>
<script>
function changeBorderStyle()
{
elem = document.querySelector('.item7');
// Pengaturan border style
elem.style.borderLeftStyle = 'ridge';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti DOM Style borderLeftStyleBlog TIK merupakan portal ilmu komputer merupakan blog pemrograman yang digunakan untuk mempelajari berbagai materi pemrograman dan beberapa materi lain seputar ilmu komputer.
Contoh: mendeskripsikan nilai properti inset.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style borderLeftStyle
DOM
</title>
<style>
.item8
{
padding: 10px;
border: 15px solid green;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti DOM Style
borderLeftStyle
</b>
<p
class="item8">
Blog TIK merupakan portal ilmu
komputer yang digunakan untuk
mempelajari berbagai materi
pemrograman dan juga seputar
ilmu komputer 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.borderLeftStyle = 'inset';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti DOM Style borderLeftStyleBlog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi pemrograman dan juga seputar ilmu komputer lainnya yang sedang populer saat ini.
Contoh: mendeskripsikan nilai properti outset.
<!DOCTYPE html>
<html>
<head>
<title>
Properti DOM Style
borderLeftStyle
</title>
<style>
.item9
{
padding: 10px;
border: 15px inset green;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti DOM Style
borderLeftStyle
</b>
<p
class="item9">
Blog TIK merupakan portal ilmu
komputer yang digunakan untuk
mempelajari ilmu pemrograman
dan ilmu komputer 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.borderLeftStyle = 'outset';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti DOM Style borderLeftStyleBlog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari ilmu pemrograman dan ilmu komputer lainnya yang sedang populer saat ini.
Contoh: mendeskripsikan nilai properti initial.
<!DOCTYPE html>
<html>
<head>
<title>
Properti DOM Style
borderLeftStyle
</title>
<style>
.item10
{
padding: 10px;
border: 15px solid green;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti DOM Style
borderLeftStyle
</b>
<p
class="item10">
Blog TIK merupakan portal ilmu
komputer yang terdiri berbagai
materi pemrograman dan ilmu
komputer lainnya yang sedang
populer saat ini.
</p>
<button
onclick="changeBorderStyle()">
Change style
</button>
<script>
function changeBorderStyle()
{
elem = document.querySelector('.item10');
// Pengaturan border style
elem.style.borderLeftStyle = 'initial';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti DOM Style borderLeftStyleBlog TIK merupakan portal ilmu komputer yang terdiri berbagai materi pemrograman dan ilmu komputer lainnya yang sedang populer saat ini.
Contoh: mendeskripsikan nilai properti inherit.
<!DOCTYPE html>
<html>
<head>
<title>
Properti DOM Style
borderLeftStyle
</title>
<style>
#parent
{
border-left-style: dotted;
padding: 10px;
}
.item11
{
padding: 10px;
border: 15px solid green;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti DOM Style
borderLeftStyle
</b>
<div id="parent">
<p class="item11">
Blog TIK merupakan portal ilmu
komputer yang digunakan untuk
mempelajari materi pemrograman
dan materi TIK lainnya yang
sedang populer saat ini.
</p>
</div>
<button
onclick="changeBorderStyle()">
Change style
</button>
<script>
function changeBorderStyle()
{
elem = document.querySelector('.item11');
// Pengaturan border style
elem.style.borderLeftStyle = 'inherit';
}
</script>
</body>
</html>
Output:Blog Elfan
Properti DOM Style borderLeftStyleBlog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari materi pemrograman dan materi TIK lainnya yang sedang populer saat ini.
- 12 Nilai Properti borderRightStyle DOM pada HTML
- 6 Nilai Properti borderRightWidth Style DOM pada HTML
- 3 Value Properti borderSpacing Style DOM pada HTML
- 12 Value Properti borderStyle Style DOM pada HTML
- 5 Value Properti borderTop Style DOM pada HTML
- 3 Contoh Properti borderTopColor Style DOM pada HTML
- 6 Contoh Properti borderTopLeftRadius Style DOM pada HTML
5 komentar untuk "Mengatur Border Kiri HTML Menggunakan borderLeftStyle 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 borderLeftStyle DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti borderLeftStyle DOM pada HTML adalah:
Hapus1. Google Chrome
2. Internet Explorer
3. Firefox
4. Apple Safari
5. Opera
Apa yang dimaksud dengan properti borderLeftStyle DOM pada HTML?
BalasHapusProperti borderLeftStyle DOM pada HTML berfungsi untuk menetapkan jenis style atau gaya dari borderLeft elemen pada dokumen HTML.
HapusProperti borderLeftStyle DOM pada HTML berfungsi untuk menetapkan style borderLeft atau style batas kiri dari suatu elemen. Properti ini didefinisikan sebagai suatu kata kunci tunggal yang dipilih dari beberapa kata kunci yang tersedia untuk properti style border. Properti borderLeftStyle digunakan untuk mengatur style dari keempat sisi elemen, dimana style borderLeft juga digunakan untuk menetapkan style hanya untuk batas kiri saja.
HapusLebar default dari borderLeft adalah medium. Dimana nilai tersebut dapat diubah baik dengan menggunakan properti borderLeftWidth atau borderWidth.
Tidak semua browser dapat melakukan rendering style dengan cara yang sama. Misalnya, pada browser Chrome titik-titik border yang diberikean oleh properti border adalah berbentuk titik-titik persegi panjang, bukan sebagai titik-titik lingkaran, dan juga beberapa jenis browser lainnya.