Método 1: crear un nuevo elemento DOM y medir su ancho: se crea un nuevo elemento «span» con el método createElement(). Luego lo agregó al cuerpo del elemento usando el método appendChild(). La propiedad de estilo de este elemento se utiliza para establecer propiedades como la fuente, el tamaño de fuente, la altura, el ancho, el espacio en blanco y la posición.
La fuente se establece en la string con la fuente necesaria. El tamaño de fuente es una string con un valor en píxeles. Las propiedades de alto y ancho se establecen en ‘auto’. La propiedad position se establece en ‘absolute’ y la propiedad whiteSpace se establece en ‘no-wrap’. El texto a medir se especifica mediante la propiedad innerHTML. La propiedad clientWidth se usa para obtener el ancho de su elemento. Este valor representará el ancho del texto en píxeles. Luego, el elemento se elimina mediante el método removeChild().
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
Calculate the text width
with JavaScript
</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
Calculate text width
with JavaScript
</b>
<p>
Text to calculate width is
"Hello World"
</p>
<p>Font size of the text is 16px</p>
<p>
Width of the text is:
<span class="output"></span>
</p>
<button onclick="getTextWidth()">
Calculate text width
</button>
<script type="text/javascript">
function getTextWidth() {
text = document.createElement("span");
document.body.appendChild(text);
text.style.font = "times new roman";
text.style.fontSize = 16 + "px";
text.style.height = 'auto';
text.style.width = 'auto';
text.style.position = 'absolute';
text.style.whiteSpace = 'no-wrap';
text.innerHTML = 'Hello World';
width = Math.ceil(text.clientWidth);
formattedWidth = width + "px";
document.querySelector('.output').textContent
= formattedWidth;
document.body.removeChild(text);
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Método 2: Usar el método canvas measureText(): Se crea un nuevo elemento «canvas» con el método createElement(). Se accede al contexto 2d requerido para dibujar gráficos utilizando el método getContext() y pasando el valor «2d» como parámetro. Este contexto se utilizará para manipular el texto en el lienzo. La fuente se especifica usando la propiedad de fuente. La string de fuente usa la misma sintaxis que un especificador de fuente CSS.
Las dimensiones del texto se calculan utilizando el método de medirTexto(). El texto a medir se pasa a este método. Devuelve un objeto TextMetrics que contiene información sobre el texto medido. La propiedad de ancho de este objeto TextMetrics se usa para obtener el ancho del texto. El ancho puede ser un valor de punto flotante, por lo tanto, la función Math.ceil() se usa para encontrar el techo del punto flotante y devolver un número entero. Este valor es el ancho del texto medido en píxeles.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
Calculate the text width with JavaScript
</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>Calculate text width with JavaScript</b>
<p>
Text to calculate width is
"Geeks For Geeks"
</p>
<p>Font size of the text is 16px</p>
<p>
Width of the text is:
<span class="output"></span>
</p>
<button onclick="getTextWidth()">
Calculate text width
</button>
<script type="text/javascript">
function getTextWidth() {
inputText = "Geeks For Geeks";
font = "16px times new roman";
canvas = document.createElement("canvas");
context = canvas.getContext("2d");
context.font = font;
width = context.measureText(inputText).width;
formattedWidth = Math.ceil(width) + "px";
document.querySelector('.output').textContent
= formattedWidth;
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA