Mengatur Transformasi Teks HTML Menggunakan textTransform Style DOM
Sebelum memahami lebih dalam materi tentang Mengatur Transformasi Teks HTML Menggunakan textTransform Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Bayangan Teks HTML Menggunakan textShadow Style DOM, Efek Teks Overflow HTML Menggunakan textOverflow Style DOM, dan Melakukan Indentasi Baris HTML Menggunakan textIndent Style DOM.
Sintak:
- Digunakan untuk mengembalikan nilai properti textTransform: object.style.textTransform
- Digunakan untuk mengatur nilai properti textTransform: object.style.textTransform = "capitalize|uppercase|lowercase|none|initial|inherit"
Return Values: Berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan transformasi dari teks pada suatu elemen.
- capitalize: Digunakan untuk mengkapitalisasi huruf pertama dari setiap kata dari suatu kalimat atau paragraf.
- uppercase: Digunakan untuk mentransformasi setiap huruf dari teks menjadi uppercase.
- lowercase: Digunakan untuk mentransformasi setiap huruf dari teks menjadi lowercase.
- none: Merupakan nilai default dari properti yang digunakan untuk menentukan tidak ada transformasi apapun pada karakter atau huruf dalam suatu kalimat atau paragraf.
- initial: Digunakan untuk mengatur nilai properti ke nilai default-nya.
- inherit: Digunakan untuk menerima nilai turunan properti dari elemen parent.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style textTransform
DOM
</title>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style textTransform
DOM
</b>
<p>
Properti textTransform dapat
digunakan untuk
mengkapitalisasi huruf, baik
dalam tipe uppercase ataupun
lowercase pada teks.
</p>
<p class="content">
Blog TIK merupakan portal ilmu
komputer.
</p>
<button
onclick="setTransform()">
Change textTransform
</button>
<!-- Script untuk kapitalisasi
karakter pertama pada setiap
kata -->
<script>
function setTransform()
{
elem = document.querySelector('.content');
elem.style.textTransform = 'capitalize';
}
</script>
</body>
</html>
Blog Elfan
Properti Style textTransform DOMProperti textTransform dapat digunakan untuk mengkapitalisasi huruf, baik dalam tipe uppercase ataupun lowercase pada teks.
Blog TIK merupakan portal ilmu komputer.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style textTransform
DOM
</title>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style textTransform
DOM
</b>
<p>
Properti textTransform dapat
digunakan untuk
mengkapitalisasi huruf, baik
uppercase ataupun lowerwcase
pada sebuah teks.
</p>
<p class="content">
Blog TIK merupakan portal ilmu
komputer.
</p>
<button
onclick="setTransform()">
Change textTransform
</button>
<!-- Script untuk kapitalisasi
setiak karakter pada kata
dalam suatu kalimat. -->
<script>
function setTransform()
{
elem = document.querySelector('.content');
elem.style.textTransform = 'uppercase';
}
</script>
</body>
</html>
Blog Elfan
Properti Style textTransform DOMProperti textTransform dapat digunakan untuk mengkapitalisasi huruf, baik uppercase ataupun lowerwcase pada sebuah teks.
Blog TIK merupakan portal ilmu komputer.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style textTransform
DOM
</title>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style textTransform
DOM
</b>
<p>
Properti textTransform dapat
digunakan untuk
mengkapitalisasi huruf, baik
uppercase ataupun lowercase
pada sebuah teks.
</p>
<p class="content">
Blog TIK merupakan portal ilMu
KOMputer.
</p>
<button
onclick="setTransform()">
Change textTransform
</button>
<script>
function setTransform()
{
elem = document.querySelector('.content');
elem.style.textTransform = 'lowercase';
}
</script>
</body>
</html>
Blog Elfan
Properti Style textTransform DOMProperti textTransform dapat digunakan untuk mengkapitalisasi huruf, baik uppercase ataupun lowercase pada sebuah teks.
Blog TIK merupakan portal ilMu KOMputer.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style textTransform
DOM
</title>
<style>
.content
{
width: 500px;
/* Pengaturan text-transform
sebelum observasi effect dari
'none' */
text-transform: capitalize;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style textTransform
DOM
</b>
<p>
Properti textTransform
merupakan properti yang dapat
digunakan untuk
mengkapitalisasi huruf, baik
uppercase ataupun lowercase
dari suatu teks.
</p>
<p class="content">
Blog TIk merupakan portal ilmu
komputer.
</p>
<button
onclick="setTransform()">
Change textTransform
</button>
<!-- Script untuk mengkonversi
lower case pada setiap huruf
-->
<script>
function setTransform()
{
elem = document.querySelector('.content');
elem.style.textTransform = 'none';
}
</script>
</body>
</html>
Blog Elfan
Properti Style textTransform DOMProperti textTransform merupakan properti yang dapat digunakan untuk mengkapitalisasi huruf, baik uppercase ataupun lowercase dari suatu teks.
Blog TIk merupakan portal ilmu komputer.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style textTransform
DOM
</title>
<style>
.content
{
width: 500px;
/* pengaturan text-transform
sebelum observasi effect dari
'none' */
text-transform: capitalize;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style textTransform
DOM
</b>
<p>
Properti textTransform dapat
digunakan untuk kapitalisasi
huruf, baik uppercaser ataupun
lowercase dari sebuah teks.
</p>
<p class="content">
Blog TIK merupakan portal ilmu
komputer.
</p>
<button
onclick="setTransform()">
Change textTransform
</button>
<!-- Script untuk mengubah
lower case pada setiap huruf
-->
<script>
function setTransform()
{
elem = document.querySelector('.content');
elem.style.textTransform = 'initial';
}
</script>
</body>
</html>
Blog Elfan
Properti Style textTransform DOMProperti textTransform dapat digunakan untuk kapitalisasi huruf, baik uppercaser ataupun lowercase dari sebuah teks.
Blog TIK merupakan portal ilmu komputer.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style textTransform
DOM
</title>
<style>
#parent
{
/* pengaturan Set
text-transform dari parent
menjadi observe effect dari
'inherit' */
text-transform: uppercase;
}
.content
{
width: 500px;
/* pengaturan text-transform
menjadi initial untuk mencegah
auto inheritance dari parent
*/
text-transform: initial;
}
</style>
</head>
<body>
<h1
style="color: green">
Blog Elfan
</h1>
<b>
Properti Style textTransform
DOM
</b>
<p>
Properti textTransform dapat
digunakan untuk kaitalisasi,
baik uppercase ataupun
lowercase dari suatu teks.
</p>
<div id="parent">
<p class="content">
Blog TIK merupakan portal ilmu
komputer.
</p>
</div>
<button
onclick="setTransform()">
Change textTransform
</button>
<script>
function setTransform()
{
elem = document.querySelector('.content');
elem.style.textTransform = 'inherit';
}
</script>
</body>
</html>
Blog Elfan
Properti Style textTransform DOMProperti textTransform dapat digunakan untuk kaitalisasi, baik uppercase ataupun lowercase dari suatu teks.
Blog TIK merupakan portal ilmu komputer.
- 6 Value Properti Style Transition DOM pada HTML
- 5 Value transitionProperty Style DOM pada HTML
- 3 Value Properti transitionDuration Style DOM pada HTML
- 5 Value Properti transitionTimingFunction Style DOM pada HTML
- 3 Value Properti transitionDelay Style DOM pada HTML
- 5 Value Properti unicodeBidi Style DOM pada HTML
- 4 Value Properti userSelect Style DOM pada HTML
5 komentar untuk "Mengatur Transformasi Teks HTML Menggunakan textTransform 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 -
Jenis browser apa yang dapat digunakan oleh seorang pengembang guna mengaktifkan properti textTransform Style DOM pada HTML?
BalasHapusBerikut ini beberapa contoh browser populer yang biasa digunakan oleh pengembang untuk mengaktifkan properti textTransform Style DOM pada HTML:
Hapus1. Google Chrome
2. Internet Explorer
3. Firefox
4. Opera
5. Apple Safari
Apa yang dimaksud dengan textTransform Style DOM pada HTML?
BalasHapusProperti textTransform Style DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mengembalikan nilai kapitalisasi teks dalam dokumen HTML. Properti ini merupakan properti yang digunakan untuk mengubah teks menjadi huruf besar ataupun sebaliknya.
HapusProperti textTranform Style DOM pada HTML merupakan properti yang digunakan untuk mengembalikan dan menerapkan nilai transformasi pada teks elemen dalam dokumen HTML.
Hapus