0

Hola amigos Necesito de su ayuda. Estoy en un tropel para agregar atributos a un párrafo.

<style>
        #contenedor{color: red;font-size: 18px;}
        //creo una clase para el color de la fuente del párrafo
       .green{color:rgba(0,150,70.0,9);font-size:2em;}

</style>

Al principio no podía crear un elemento p desde javascript así que me toco colocar un elemento p en html que sirviera de referencia.

<div id="contenedor">
        <!--creo un parrafo html para que luego sea el parrafo padre-->
        <p></p>

    </div>

Tal ves no lo este haciendo bien uds me dirán bueno en todo caso el tropel mas grande que encuentro es que en mi intento de usar el metodo setAttribute() no logro darle el atributo a mi nuevo parrafo creado.

<script>   
         var padre=document.getElementsByTagName("p")[0].parentNode;
         //hago un nuevo parrafo con javascript
         var nuevoParrafo=document.createElement("p");
         //coloco un contenido a mi parrafo javascript
         var contenidoParrafo=document.createTextNode("contenido de mi parrafo en javascript");
         nuevoParrafo.appendChild(contenidoParrafo);
         /*Es aqui donde estoy fallando no puedo colocar atributos al parrafo como color y tamaño*/
         nuevoParrafo.setAttribute("class","green");
           //imprimo mi nuevo parrafo
          padre.appendChild(nuevoParrafo);
    </script>      
1
  • ¿Quieres que el segundo párrafo sea el que tenga los atributos por medio de setAttribute?
    – user128299
    Commented el 31 dic. 2019 a las 20:43

1 respuesta 1

1

Primero, si quieres que el parrafo que tienes en tu html sea el elemento padre, esta no seria la manera:

var padre=document.getElementsByTagName("p")[0].parentNode;

ya que estas diciendo que seleccione el nodo padre de tu p tag, en este caso el parentNode seria el div, solo borrar esa seleccion de parentNode. Lo demas lo estas haciendo bien, corri tu codigo y me funciona bien, si quieres agregar mas atributos podria ser asi:

nuevoParrafo.setAttribute("class","green");
nuevoParrafo.setAttribute("id","new");
3
  • excelente. en realidad si es como tu dices. suprimí el parentNode y ya el código se ejecuta como quiero pero tengo otro problema. si creo otros elementos p y a uno de ellos quiero darles un font-size de mayor tamaño entonces todos aumentan de tamaño . ¿como hago para evitar eso?. Commented el 1 ene. 2020 a las 2:03
  • si solo quieres agregar un fon-size a un solo parrafo se me ocurre que al crear el parrafo le asignes un id y en base a ese id cambiar el valor del font-size. O seleccionar como lo has hecho document.getElementsByTagName("p")[posicion]
    – Isaac
    Commented el 2 ene. 2020 a las 2:46
  • como tu dijiste funciona excelente, tambien se me ocurrio usar la propiedad style por ejemplo elementoP.style.fontSize="1.5em"; y funciona igual de excelente. gracias Commented el 2 ene. 2020 a las 5:19

Tu Respuesta

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

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