Soy un estudiante de JS. Logré acceder a una propiedad de objeto pero me gustaría darle estilo, por ejemplo, cambiar su color.
const houseForSale = { material: "brick", size: "4 bedrooms", condition: "excellent", characteristic: "red roof" } const message = document.querySelector("#demo"); let styleFragment = houseForSale.characteristic; styleFragment.style.color = "red"; let text = "The house has a " + styleFragment + "."; console.log(text); <p id="demo"></p>Cuando hago eso, aparece un mensaje de error: "no se puede acceder a la propiedad 'color', styleFragment.style no está definido.
Los nodos de texto (y las cadenas sin formato) no se pueden diseñar, no tienen una propiedad .style . Cree una cadena de marcado HTML y, por ejemplo, un <span> con un estilo:
const houseForSale = { material: "brick", size: "4 bedrooms", condition: "excellent", characteristic: "red roof" }; const text = "The house has a <span style='color: red'>" + houseForSale.characteristic + "<span>."; document.querySelector("#demo").innerHTML = text; <p id="demo"></p> O cree explícitamente un elemento primero, luego asígnelo a su propiedad de style .
const houseForSale = { material: "brick", size: "4 bedrooms", condition: "excellent", characteristic: "red roof" }; const p = document.querySelector("#demo"); p.appendChild(document.createTextNode('The house has a ')); const span = p.appendChild(document.createElement('span')); span.textContent = houseForSale.characteristic; span.style.color = 'red'; p.appendChild(document.createTextNode('.')); <p id="demo"></p>