2

Quiero obterer el tamaño del texto (de la fuente en este caso New Times Roman aunque puede ser otro, depende del usuario), intenté esto:

var p = document.querySelector("#p").firstChild;
console.log(getComputedStyle(p).width);
<p id ="p">Texto</p>

Pero con getBoundingStyle solo funciona con elementos, no con nodos en si.

Tienen alguna idea de como obtener el tamaño del texto?

Pregunto porque al final quiero poner un borde alrededor del texto, asi:

var p = document.querySelector("#p");
var texto = p.firstChild;
//texto.style.border = "2px solid blue"; Error
//Así que se me ocurio ponerle el borde al p:
p.style.border = "2px solid black";
//Problema: el width y el height son más grandes que el width y el height del texto.
//Se me ocurre voy a cambiarle al p el width y el height pero no se como acceder a estos valores del texto. Pero no se como hacerlo

//Ayudaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<p id ="p">Texto</p>

Muchísimas gracias maestr@s!

0

1 respuesta 1

1

Como bien te dice el error, los TextNode no tienen estilo que se pueda calcular, lo toman del elemento padre. Por otro lado, puedes averiguar el tamaño del nodo de texto de un modo poco intuitivo:

const p = document.querySelector("#p");

const range = document.createRange();
range.selectNodeContents(p.firstChild);
const rects = range.getClientRects();
console.log('Tamaño del nodo de texto', rects[0].width);
console.log('Tamaño del párrafo', getComputedStyle(p).width);
console.log('Texto del párrafo:', getComputedStyle(p).fontFamily,getComputedStyle(p).fontSize);
p {
  font-family: 'Times New Roman';
  font-size: 2em;
}
<p id ="p">Texto</p>

Por otro lado, el problema de poner un borde es que un elemento párrafo usa por defecto todo el ancho que puede, no se ajusta al texto. Si quieres poner un borde puedes jugar con el display o usar otro elemento como un span:

p, div, span {
  border: 1px solid grey;
}

.especial {
display: inline-block;
}
<p> display: block (default)</p>
<div> display: block (default) </div>

<span> display: inline (default) </span>
<span> display: inline (default) </span> 

<p class="especial">  display: inline-block (css)  </p>
<p class="especial">  display: inline-block (css)  </p>

6
  • Muchas gracias, me srive! Pero la propiedad .fontsize del p te devuelve el ancho, el alto o los dos?
    – Nokia
    el 24 ene. a las 19:29
  • 1
    El alto: cada letra puede tener un ancho distinto, a menos que el tipo sea monoespaciado (de ancho único), pero el alto máximo es fijo el 24 ene. a las 19:30
  • Entiendo, y se te ocurre alguna forma de obtener el ancho tambien?
    – Nokia
    el 24 ene. a las 19:35
  • He añadido más detalles, a ver si te sirve... el 24 ene. a las 19:38
  • Gracias ^^, ya me sirve, aunque me quede aún con la duda de como obtener el ancho del texto? Se te ocurre alguna forma?
    – Nokia
    el 24 ene. a las 19:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.