Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengatur Transformasi Teks HTML Menggunakan textTransform Style DOM

Properti Style textTransform DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mengembalikan nilai kapitalisasi dari teks. Properti textTransform dapat digunakan untuk membuat teks menjadi uppercase, lowercase, atau huruf kapital dari karakter pertama pada setiap kata dalam suatu kalimat atau paragraf.

6 Value Properti textTransform Style DOM pada HTML
Properti 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 [klik], Efek Teks Overflow HTML Menggunakan textOverflow Style DOM [klik], dan Melakukan Indentasi Baris HTML Menggunakan textIndent Style DOM [klik].

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.

Baca Juga:

Property Values:
  • 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>

Output:

Blog Elfan

Properti Style textTransform DOM

Properti 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>

Output:

Blog Elfan

Properti Style textTransform DOM

Properti 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>

Output:

Blog Elfan

Properti Style textTransform DOM

Properti 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>

Output:

Blog Elfan

Properti Style textTransform DOM

Properti 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>

Output:

Blog Elfan

Properti Style textTransform DOM

Properti 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>

Output:

Blog Elfan

Properti Style textTransform DOM

Properti textTransform dapat digunakan untuk kaitalisasi, baik uppercase ataupun lowercase dari suatu teks.

Blog TIK merupakan portal ilmu komputer.


Artikel ini didedikasikan kepada: Fitri Setyandari, Geli Ambarwati, Gilang Fajar Prasetyo, Handryca Taufik Shaputra, dan Herdina Elok Az-Zahra.

5 komentar untuk "Mengatur Transformasi Teks HTML Menggunakan textTransform Style DOM"

  1. Jenis browser apa yang dapat digunakan oleh seorang pengembang guna mengaktifkan properti textTransform Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut ini beberapa contoh browser populer yang biasa digunakan oleh pengembang untuk mengaktifkan properti textTransform Style DOM pada HTML:
      1. Google Chrome
      2. Internet Explorer
      3. Firefox
      4. Opera
      5. Apple Safari

      Hapus
  2. Apa yang dimaksud dengan textTransform Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti 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.

      Hapus
    2. Properti textTranform Style DOM pada HTML merupakan properti yang digunakan untuk mengembalikan dan menerapkan nilai transformasi pada teks elemen dalam dokumen HTML.

      Hapus

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 -