Mengatur Batas Perulangan Gambar HTML borderImageRepeat DOM
- Berfungsi untuk mengembalikan nilai properti borderImageRepeat: object.style.borderImageRepeat
- Berfungsi untuk mengatur nilai properti borderImageRepeat: object.style.borderImageRepeat="stretch|repeat|round|initial|inherit"
Return Values: digunakan untuk mengembalikan nilai border-image.
Property Values:
- stretch: digunakan untuk stretch gambar yang memenuhi seluruh area, dan merupakan nilai default dari properti borderImageRepeat. Sintak: object.style.borderImageRepeat="stretch";
- repeat: digunakan untuk melakukan perulangan border-image untuk memenuhi seluruh area. Sintak: object.style.borderImageRepeat = "repeat";
- round: digunakan untuk melakukan perulangan image atau gambar untuk memenuhi area. Jika image yang digunakan tidak memenuhi area pada keseluruhan bingkat, maka akan dilakukan pengukuran skala ulang terhadap gambar. Sintak: object.style.borderImageRepeat = "round";
- space: perbedaan antara nilai repeat adalah, jika nilai yang diberikan tidak memenuhi area keseluruhan ubin, maka ruang atau spasi tambahan akan diberikan disepanjang ubin tersebut. Sintak: object.style.borderImageRepeat = "space";
- initial: digunakan untuk mengatur properti borderImageRepeat ke nilai default-nya.
- inherit: digunakan untuk mengatur properti borderImageRepeat dari nilai elemen parent-nya.
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
#MKK1
{
border: 20px solid transparent;
width: 200px;
padding: 10px 20px;
/* Untuk Browser Safari */
-webkit-border-image: url(
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar%2B1.PNG") 50 50 round;
/* Untuk Browser Opera */
-o-border-image: url(
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar%2B1.PNG") 50 50 round;
border-image: url(
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar%2B1.PNG") 50 50 round;
}
</style>
</head>
<body>
<div
id = "MKK1">
<h1>
Blog Elfan
</h1>
</div>
<br>
<button
onclick = "Bonbon1()">
Click Here!
</button>
<p>
Klik tombol untuk mengubah
properti.
</p>
<script>
function Bonbon1()
{
/* Untuk Browser Safari */
document.getElementById("MKK1").style.WebkitBorderImage =
"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar+1.PNG) 50 50 stretch";
/* Untuk Browser Opera */
document.getElementById("MKK1").style.OBorderImage =
"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar+1.PNG) 50 50 stretch";
document.getElementById("MKK1").style.borderImage =
"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar+1.PNG) 50 50 stretch";
}
</script>
</body>
</html>
Output:Blog Elfan
Klik tombol untuk mengubah properti.
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
#MFF2
{
border: 15px solid transparent;
width: 200px;
padding: 10px 20px;
/* Untuk Browser Safari */
-webkit-border-image: url(
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar%2B1.PNG") 50 50 stretch;
/* Untuk Browser Opera */
-o-border-image: url(
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar%2B1.PNG") 50 50 stretch;
border-image: url(
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar%2B1.PNG") 50 50 stretch;
}
</style>
</head>
<body>
<div
id = "MFF2">
<h1>
Blog Elfan
</h1>
</div>
<br>
<button
onclick="Bobon2()">
Click Here!
</button>
<p>
Klik tombol untuk mengubah
properti.
</p>
<script>
function Bobon2()
{
/* Untuk Browser Safari */
document.getElementById("MFF2").style.WebkitBorderImage =
"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar+1.PNG) 50 50 repeat";
/* Untuk Browser Opera */
document.getElementById("MFF2").style.OBorderImage =
"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar+1.PNG) 50 50 repeat";
document.getElementById("MFF2").style.borderImage =
"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar+1.PNG) 50 50 repeat";
}
</script>
</body>
</html>
Output:Blog Elfan
Klik tombol untuk mengubah properti.
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
#BNM3 {
border: 15px solid transparent;
width: 200px;
padding: 10px 20px;
/* Untuk Browser Safari */
-webkit-border-image: url(
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar%2B1.PNG") 50 50 stretch;
/* Untuk Browser Opera */
-o-border-image: url(
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar%2B1.PNG") 50 50 stretch;
border-image: url(
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar%2B1.PNG") 50 50 stretch;
}
</style>
</head>
<body>
<div
id = "BNM3">
<h1>
Blog Elfan
</h1>
</div>
<br>
<button
onclick="Bonbon3()">
Click Here!
</button>
<p>
Klik tombol untuk mengubah properti.
</p>
<script>
function Bonbon3()
{
/* Untuk Browser Safari */
document.getElementById("BNM3").style.WebkitBorderImage =
"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar+1.PNG) 50 50 round";
/* Untuk Browser Opera */
document.getElementById("BNM3").style.OBorderImage =
"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar+1.PNG) 50 50 round";
document.getElementById("BNM3").style.borderImage =
"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar+1.PNG) 50 50 round";
}
</script>
</body>
</html>
Output:Blog Elfan
Klik tombol untuk mengubah properti.
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
#BNK4 {
border: 15px solid transparent;
width: 200px;
padding: 10px 20px;
/* Untuk Browser Safari */
-webkit-border-image: url(
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar%2B1.PNG") 50 50 stretch;
/* Untuk Browser Opera */
-o-border-image: url(
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar%2B1.PNG") 50 50 stretch;
border-image: url(
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar%2B1.PNG") 50 50 stretch;
}
</style>
</head>
<body>
<div
id="BNK4">
<h1>
Blog Elfan
</h1>
</div>
<br>
<button
onclick="Bonbon4()">
Click Here!
</button>
<p>
Klik tombol untuk mengubah properti.
</p>
<script>
function Bonbon4()
{
/* Untuk Browser Safari */
document.getElementById("BNK4").style.WebkitBorderImage =
"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar+1.PNG) 50 50 space";
/* Untuk Browser Opera */
document.getElementById("BNK4").style.OBorderImage =
"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar+1.PNG) 50 50 space";
document.getElementById("BNK4").style.borderImage =
"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcnkpmaDCF2Gw0GtrFp1lDsNggUZNosgcF1XcbiNa9rnBW3uv_YOFC8zvFwaWKzLIho8zTUgfOoE7_DCpraRNTnd8wkVLRMFnZDJnskbaUOzy-oPshABcpKWNAUNdYy_GwRokknAO9bmU/s1395/gambar+1.PNG) 50 50 space";
}
</script>
</body>
</html>
Output:Blog Elfan
Klik tombol untuk mengubah properti.
- 4 Value Properti borderLeftColor Style DOM pada HTML [klik]
- 12 Value Properti borderLeftStyle DOM HTML [klik]
- 6 Value Properti borderLeftWidth Style DOM pada HTML [klik]
- 4 Value Properti borderRadius Style DOM pada HTML [klik]
- 5 Value Properti borderRight Style DOM pada HTML [klik]
- 2 Contoh Penggunaan Tag Legend untuk Pendefinisian Title HTML [klik]
- 12 Nilai Properti borderRightStyle DOM pada HTML [klik]
5 komentar untuk "Mengatur Batas Perulangan Gambar HTML borderImageRepeat 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 borderImageRepeat Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti borderImageRepeat Style DOM pada HTML:
Hapus1. Google Chrome
2. Internet Explorer 11.0
3. Mozilla firefox
4. Safari 6.0
Apa yang dimaksud dengan properti borderImageRepeat Style DOM HTML?
BalasHapusProperti borderImageRepeat Style DOM pada HTML merupakan properti yang digunakan untuk menentukan apakah gambar perbatasan harus dilakukan perulangan atau tidak, dibulatkan atau tidak, diberi spasi atau tidak, dan diregangkan atua tidak.
HapusProperti CSS borderImageRepeat Style DOM pada HTML digunakan untuk mendefinisikan bagaimana daerah tepi gambar sumber dapat disesuaikan pengaturan yang dilakukan oleh pengembang web agar bersesuaian dengan dimensi gambar berbatasan elemen.
Hapus