Mengatur Nilai Seleksi HTML Menggunakan userSelect Style DOM
Sebelum memahami lebih dalam materi tentang Mengatur Nilai Seleksi HTML Menggunakan userSelect Style DOM, terlebih dahulu pelajari materi tentang: Properti unicodeBidi Style HTML DOM dan Fungsinya, Mengatur Jeda Transisi HTML Menggunakan transitionDelay Style DOM, dan Mengatur Transisi Waktu HTML Menggunakan transitionTimingFunction Style DOM.
Sintak:
- digunakan untuk mengembalikan nilai properti userSelect: object.style.userSelect
- digunakan untuk mengatur nilai properti userSelect: object.style.userSelect = "auto | none | text | all"
Property Values:
- auto: merupakan nilai default dari properti yang digunakan untuk membuat user dapat melakukan select pada teks.
- none: digunakan untuk mencegah teks seleksi dari user. Atau dengan kata lain, user tidak dapat melakukan seleksi teks yang dituju oleh user tersebut.
- text: digunakan untuk memberikan pengaturan enable kepada user untuk melakukan seleksi teks, namun tidak menyediakan pencegahan teks seleksi dari user itu sendiri.
- all: digunakan untuk melakukan seleksi teks dengan satu kali klik saja pada mouse.
Return Values: berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan apakah sebuah teks dari elemen dapat diseleksi atau tidak.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style user-select DOM
pada HTML
</title>
<style>
div
{
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
h1,h3
{
color: green;
font-size: 30px;
}
body
{
text-align: center;
}
</style>
</head>
<body>
<h1>
Blog Elfan
</h1>
<h3>
Properti Style UserSelect DOM
pada HTML
</h3>
<div id="FDD">
Blog TIK merupakan portal ilmu
komputer.
</div>
<br>
<button
onclick="myBoon2s()">
Submit
</button>
<script>
function myBoon2s()
{
var x = document.getElementById("FDD");
// Chrome, Safari, Opera
x.style.WebkitUserSelect = "none";
// Firefox
x.style.MozUserSelect = "none";
// IE 10+
x.style.msUserSelect = "none";
// Standar syntax
x.style.userSelect = "none";
}
</script>
</body>
</html>
Blog Elfan
Properti Style UserSelect DOM pada HTML
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style user-select DOM
pada HTML
</title>
<style>
h1, h3
{
color: green;
font-size: 30px;
}
body
{
text-align: center;
}
</style>
</head>
<body>
<h1>
Blog Elfan
</h1>
<h3>
Properti Style UserSelect DOM
</h3>
<div
id="BB2"
style="user-select:auto;">
Blog TIK merupakan portal ilmu
komputer.
</div>
<br>
<button
onclick="myDon2s()">
Submit
</button>
<script>
function myDon2s()
{
alert(document.getElementById(
"BB2").style.userSelect);
}
</script>
</body>
</html>
Blog Elfan
Properti Style UserSelect DOM
- 4 Value Properti wordSpacing Style DOM pada HTML
- 4 Value Properti wordWrap Style DOM pada HTML
- 4 Value Properti zIndex Style DOM pada HTML
- Penggunaan Properti window.closed DOM pada HTML
- Penggunaan Properti window.defaultStatus DOM pada HTML
- Penggunaan Properti window.frameElement DOM pada HTML
- Penggunaan Properti Frame Window DOM pada HTML
5 komentar untuk "Mengatur Nilai Seleksi HTML Menggunakan userSelect 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 -
- Big things start from small things -
Bro, ada browser apa saja yang dapat digunakan untuk mengaktifkan properti UserSelect Style DOM pada HTML?
BalasHapusAda beberapa bro, berikut ini dalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti UserSelect Style DOM pada HTML:
Hapus1. Google Chrome
2. Internet Explorer
3. Firefox
4. Opera
5. Safari
Apa yang dimaksud dengan properti userSelect DOM pada HTML?
BalasHapusProperti userSelect DOM pada HTML merupakan properti yang digunakan untuk menetapkan atau mengembalikan nilai apakah teks elemen dapat dipilih atau tidak.
HapusJika user melakukan klik dua kali pada beberapa teks yang menggunakan properti userSelect, maka teks tersebut akan disorot atau dipilih.
Hapus