Estoy intentando crear un elemento de texto y luego agregar atributos CSS

He intentado usar el siguiente código

function create(text){
  var t = document.createTextNode(text);  
  t.style.color = "black"
  t.style.backgroundColor="white"
  t.style.borderRadius="20px"
  t.style.border="4px solid black"
  document.body.appendChild(t);
}
create("hello");

Espero crear un texto con un fondo blanco y un radio de borde de 20 píxeles con un borde negro sólido de 4 píxeles

0
Squill.is.me 10 may. 2019 a las 16:19

3 respuestas

La mejor respuesta

En lugar de un nodo de texto, al que no creo que pueda agregar estilos, simplemente use un span en su lugar

function create(text){
  var t = document.createElement("span");
  t.innerText = text;  
  t.style.color = "black"
  t.style.backgroundColor="white"
  t.style.borderRadius="20px"
  t.style.border="4px solid black"
  document.body.appendChild(t);
}
create("hello");
1
Keith 10 may. 2019 a las 13:23

Tiene problemas porque los nodos de texto no deben ser diseñados.

En su lugar, debe crear un elemento DOM. Tomé su código y lo actualicé para crear un <p> (el elemento más cercano del nodo de texto, supongo) con su CSS:

function create(text) {
  var t = document.createElement('p');  
  
  t.innerText = text;
  
  t.style.color = "black"
  t.style.backgroundColor="white"
  t.style.borderRadius="20px"
  t.style.border="4px solid black"
  
  document.body.appendChild(t);
}

create("hello");
1
Kévin Bibollet 10 may. 2019 a las 13:22

Estás en la dirección correcta. Lo único que debe hacer es cambiar document.createTextNode(text) con:

var t = document.createElement('span');
t.innerText = text;
\\...
document.body.appendChild(t);

La razón por la que su código no funciona es que solo puede diseñar etiquetas HTML, y el nodo de texto que creó solo contiene la cadena que agregó, sin una etiqueta circundante.

Por ejemplo:

<span>
  hello
</span>

Es una etiqueta con algo de texto, mientras que el texto hello en el medio es un TextNode.

Espero que esto tenga sentido.

Referencia:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

https://developer.mozilla.org/en-US/docs/Web/API/Document/createTextNode

0
Alex 10 may. 2019 a las 13:27