Soy nuevo en el desarrollo web y he estado tratando de aplicar estilos a los elementos div que se generan usando javascript, pero solo he podido hacerlo manualmente usando la siguiente función:
function addStyle(element) { rem = element.style; rem.fontSize = "16px"; rem.background = "#fff"; rem.color = "#333"; } Esto funciona bien para elementos individuales, pero es posible que se creen docenas de elementos dinámicos que deben incluir el mismo estilo en línea. He leído en otra parte que aparentemente esta no es una buena práctica y debe evitarse si es posible. Por lo tanto, preferiría que estas reglas css se definan en un archivo separado para poder acceder a ellas también para otros elementos.
Sin embargo, no he podido encontrar una solución en ningún lugar en línea, sin importar cuán similar pueda parecer su problema. Aquí está mi código HTML relevante:
<h3 id="kudos_title">Kudos</h3> <div class="remarks"></div>Mi JS para crear un nuevo elemento div:
function addElement (i) { // create a new div element const newDiv = document.createElement("div"); // Add message, author, and source to content const content = document.createTextNode('"' + `${msg[i].remark}` + '"' + " - " + `${msg[i].author}` + " from " + `${msg[i].source}`); // add the text node to the newly created div newDiv.appendChild(content); addStyle(newDiv, i); // add the newly created element and its content into the DOM const current_remark = document.querySelector(".remarks"); document.body.insertBefore(newDiv, current_remark); }Por último, el CSS:
#kudos_title { text-align: center; font-family: Spectral, serif; font-size: 50px; } .remarks { padding: 20px; color: pink; background-color: springgreen; }Debo mencionar que el encabezado con id=kudos_title tiene un estilo correcto, pero no cualquier parte de la clase de comentarios. Claramente, el archivo .css se reconoce por elementos estáticos, pero los div creados por JS no.
Está utilizando insertBefore , que insertará el elemento antes del objetivo (por lo tanto, NO se insertará dentro de él). Intenteagregar en su lugar. Además, es una buena práctica usar entidades HTML para cosas como comillas en el texto, así que las usé aquí, mostrando cómo puede combinar su cadena usando los literales de su plantilla. Para agregar ciertas clases, use element.classList.add()
let msg = [{ remark: "test", author: "they", source: "there" }]; function addElement(i) { // create a new div element const newDiv = document.createElement("div"); // Add message, author, and source to content const content = `"${msg[i].remark}" - ${msg[i].author} from ${msg[i].source}`; // add the text node to the newly created div newDiv.innerHTML = content; newDiv.classList.add('special'); // add the newly created element and its content into the DOM const current_remark = document.querySelector(".remarks"); current_remark.append(newDiv); } addElement(0); #kudos_title { text-align: center; font-family: Spectral, serif; font-size: 50px; } .remarks { padding: 20px; color: pink; background-color: springgreen; } .special { color: #f00; font-weight: bold; } <h3 id="kudos_title">Kudos</h3> <div class="remarks"></div>Si desea que todos los nuevos divs tengan el mismo estilo, puede asignarles una clase y luego definir esos estilos en un archivo CSS.
Puede hacerlo de esta manera: tenga en cuenta que el nombre "myclass" se proporciona únicamente a modo de ilustración, estoy seguro de que puede encontrar un nombre significativo que funcione para su aplicación:
JS
function addElement (i) { // create a new div element const newDiv = document.createElement("div"); // Add message, author, and source to content const content = document.createTextNode('"' + `${msg[i].remark}` + '"' + " - " + `${msg[i].author}` + " from " + `${msg[i].source}`); // add the text node to the newly created div newDiv.appendChild(content); // add CSS class newDiv.classList.append("myclass"); // add the newly created element and its content into the DOM const current_remark = document.querySelector(".remarks"); document.body.insertBefore(newDiv, current_remark); }CSS
.myclass { font-size: 16px; background: #fff"; color: #333; }Simplemente use una clase e inclúyala al crear el elemento.
JS:
newDiv.className = 'bar';CSS:
.dynamicElement{ padding: 20px; color: pink; background-color: springgreen; }Puedes usar un archivo css