La propiedad DOM Style UserSelect se usa para establecer o devolver si el usuario puede seleccionar el texto o no.
Sintaxis:
- Se utiliza para devolver la propiedad:
object.style.userSelect
- Se utiliza para establecer la propiedad:
object.style.userSelect = "auto|none|text|all"
Propiedades :
- auto: Tiene el valor predeterminado, es decir, el usuario puede seleccionar el texto.
- ninguno: se utiliza para evitar la selección de texto por parte del usuario, lo que significa que el usuario no puede seleccionar el texto por sí mismo.
- texto: esta propiedad permite al usuario seleccionar el texto. No proporciona evitar la selección de texto por parte del usuario.
- all: Se utiliza para seleccionar el texto con solo un clic del mouse en lugar de un doble clic.
Valores devueltos: Devuelve un valor de string que representa si se puede seleccionar el texto de un elemento.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title> DOM Style user-select property</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>GeeksforGeeks</h1>
<h3>DOM Style UserSelect Property</h3>
<div id="GFG">GeeksforGeeks:
A computer science portal for geeks</div>
<br>
<button onclick="myGeeks()">Submit</button>
<script>
function myGeeks() {
var x = document.getElementById("GFG");
// Chrome, Safari, Opera
x.style.WebkitUserSelect = "none";
// Firefox
x.style.MozUserSelect = "none";
// IE 10+
x.style.msUserSelect = "none";
// Standard syntax
x.style.userSelect = "none";
}
</script>
</body>
</html>
Producción :
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo-2:
html
<!DOCTYPE html>
<html>
<head>
<title> DOM Style user-select property</title>
<style>
h1,
h3 {
color: green;
font-size: 30px;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>DOM Style UserSelect Property</h3>
<div id="GFG" style="user-select:auto;">
GeeksforGeeks: A computer science portal for geeks
</div>
<br>
<button onclick="myGeeks()">Submit</button>
<script>
function myGeeks() {
alert(document.getElementById(
"GFG").style.userSelect);
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Nota: El doble clic en algún texto se seleccionará/resaltará, pero esta propiedad se puede usar para evitarlo.
Navegador compatible: los navegadores compatibles con DOM Style UserSelect se enumeran a continuación:
- Google Chrome 54 y superior
- Edge 79 y superior
- Internet Explorer 10 y superior
- Firefox 69 y superior
- Ópera 41 y superior
- Safari 3 y superior
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA