Clip Style HTML DOM dan Fungsinya
- berfungsi untuk mengembalikan nilai properti clip: object.style.clip
- berfungsi untuk mengatur nilai properti clip: object.style.clip = "rect(top right bottom left)|normal|initial|inherit"
Return Values: digunakan untuk mengembalikan sebuah nilai string, yang merepresentasikan bagian dari posisi elemen yang visible.
Property Values:
- rect(top right bottom left): digunakan untuk melakukan clip elemen pada sebuah rectangular shape. Nilai top, right, bottom, dan left digunakan untuk mendefinisikan titik dari persegi panjang.
- normal: digunakan untuk tidak melakukan clip elemen, dan merupakan nilai default dari properti.
- initial: digunakan untuk mengatur nilai properti ke nilai default-nya.
- inherit: digunakan untuk menerima nilai turunan properti dari nilai parent.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style clip DOM
</title>
<style>
#myImage1
{
position: absolute;
}
button
{
margin-top: 400px;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style clip DOM
</b>
<p>
Properti clip digunakan untuk
menentukan bagian dari sebuah
elemen posisi yang visible.
</p>
<img
src=
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyizkhCmvzS6vbSN5BKe5vmhs_cFakFxB8u_E3U3_OXNRz-QJy4CemqcTyPrvzfOofiws4FHtSerLDrlYP6ygRUH4rpC3dtrozkB9Dz-_5cQIuYGT3KaiF4YRD8zcz2u92zmlOZRMfNlVBTylRfL-TMTFlvrd5wCxJvm3FXsIulLr40WStkBfdMO3d/s800/blogmapel.webp"
id="myImage1">
<button
onclick="setClip()">
Set Clip Property
</button>
<!-- Script untuk mengatur
clip ke rect() -->
<script>
function setClip()
{
elem =
document.querySelector('#myImage1');
elem.style.clip =
'rect(75px 250px 250px 75px)';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style clip DOM
</title>
<style>
#myImage2
{
position: absolute;
clip: rect(50px 200px 200px 50px);
}
button
{
margin-top: 400px;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style clip DOM
</b>
<p>
Properti clip digunakan untuk
menentukan bagian dari sebuah
posisi elemen yang visible.
</p>
<img
src=
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyizkhCmvzS6vbSN5BKe5vmhs_cFakFxB8u_E3U3_OXNRz-QJy4CemqcTyPrvzfOofiws4FHtSerLDrlYP6ygRUH4rpC3dtrozkB9Dz-_5cQIuYGT3KaiF4YRD8zcz2u92zmlOZRMfNlVBTylRfL-TMTFlvrd5wCxJvm3FXsIulLr40WStkBfdMO3d/s800/blogmapel.webp"
id="myImage2">
<button
onclick="setClip()">
Set Clip Property
</button>
<!-- Script untuk mengatur
clip ke auto -->
<script>
function setClip()
{
elem =
document.querySelector('#myImage2');
elem.style.clip = 'auto';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style clip DOM
</title>
<style>
#myImage3
{
position: absolute;
clip: rect(75px 300px 300px 75px);
}
button
{
margin-top: 400px;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style clip DOM
</b>
<p>
Properti clip yang digunakan
untuk menentukan bagian dari
sebuah posisi elemen yang
visible.
</p>
<img
src=
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyizkhCmvzS6vbSN5BKe5vmhs_cFakFxB8u_E3U3_OXNRz-QJy4CemqcTyPrvzfOofiws4FHtSerLDrlYP6ygRUH4rpC3dtrozkB9Dz-_5cQIuYGT3KaiF4YRD8zcz2u92zmlOZRMfNlVBTylRfL-TMTFlvrd5wCxJvm3FXsIulLr40WStkBfdMO3d/s800/blogmapel.webp"
id="myImage3">
<button
onclick="setClip()">
Set Clip Property
</button>
<!-- Script untuk mengatur
clip ke initial -->
<script>
function setClip()
{
elem =
document.querySelector(
'#myImage3');
elem.style.clip = 'initial';
}
</script>
</body>
</html>
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style clip Property
DOM
</title>
<style>
#parent
{
clip: rect(75px 300px 300px 75px);
}
#myImage4
{
position: absolute;
}
button
{
margin-top: 400px;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style clip DOM
</b>
<p>
Properti clip digunakan untuk
menentukan bagian dari sebuah
posisi elemen yang visible.
</p>
<div id="parent">
<img
src=
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyizkhCmvzS6vbSN5BKe5vmhs_cFakFxB8u_E3U3_OXNRz-QJy4CemqcTyPrvzfOofiws4FHtSerLDrlYP6ygRUH4rpC3dtrozkB9Dz-_5cQIuYGT3KaiF4YRD8zcz2u92zmlOZRMfNlVBTylRfL-TMTFlvrd5wCxJvm3FXsIulLr40WStkBfdMO3d/s800/blogmapel.webp"
id="myImage4">
</div>
<button
onclick="setClip()">
Set Clip Property
</button>
<!-- Script untuk mengatur
clip ke inherit -->
<script>
function setClip()
{
elem =
document.querySelector(
'#myImage4');
elem.style.clip = 'inherit';
}
</script>
</body>
</html>
- 5 Value Properti columnRule Style DOM pada HTML
- 3 Value Properti columnRuleColor Style DOM pada HTML
- 12 Value Properti columnRuleStyle DOM pada HTML
- 6 Value Properti columnRuleWidth Style DOM pada HTML
- 5 Value Properti columns Style DOM pada HTML
- 4 Value Properti columnSpan Style DOM pada HTML
- 4 Value Properti counterIncrement Style DOM pada HTML
5 komentar untuk "Clip Style HTML DOM dan Fungsinya"
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 browse apa saja yang dapat digunakan untuk mengaktifkan properti clip style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti clip style DOM pada HTML:
Hapus1. Google Chrome
2. Internet Explorer
3. Firefox
4. Opera
5. Apple Safari
Apa yang dimaksud dengan properti clip Style DOM pada HTML?
BalasHapusProperti clip Style DOM pada HTML digunakan untuk menyetel atau mengembalikan nilai bagian mana dari suatu elemen yang diposisikan untuk terlihat pada layar monitor.
HapusProperti clip CSS digunakan untuk mendefiniskan bagian elemen yang terlihat atau visible. Properti clip hanya berlaku untuk elemen yang diposisikan secara absolute atau fixed.
Hapus