Estoy seguro de que hay alguna lógica subyacente aquí que no entiendo, pero no puedo encontrar una solución en línea. A veces se aplican los estilos, a veces no a pesar de que no se realizan cambios. Cuando comento un estilo para una ID, otra ID comienza a funcionar, pero son completamente independientes entre sí, ¿y cambiar la posición de uno en el flujo de documentos de Javascript hace que el otro funcione? Solo unos días en Javascript y esto es muy, muy extraño para mí. Estoy usando un servidor en vivo en el código VS.
const result = document.querySelector("#myElement"); result.style.color = "blue"; result.style.backgroundColor = "black"; result.style.fontSize = "80px"; let button = document.getElementById("button"); button.style.color = "red"; let para = document.getElementById("p"); para.style.backgroundColor = "black"; para.style.color = "green";aquí está HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="index.css" type="text/css" /> <title>Document</title> </head> <body> <h1 id="myElement">this is a heading</h1> <p id="p">this is a pragraph, thanks</p> <div class="container"> <div class="items-1 item">item 1</div> <div class="items-2 item">item 2</div> <div class="items-3 item">item 3</div> <div class="items-4 item">item 4</div> <div class="items-5 item">item 5</div> </div> <button id="btn">click me</button> <script src="index.js"></script> </body> </html>Debe llamar a los elementos por su ID, etiquetas por su TagName, etc. Consulte los comentarios a continuación y el código corregido.
const result = document.getElementById("#myElement"); // you get an element by it's ID // result.style.color = "blue"; result.style.backgroundColor = "black"; result.style.fontSize = "80px"; let button = document.getElementByTagName("button"); // you get a tag by it's TagName // button.style.color = "red"; let para = document.getElementByTagName("p"); // you get a tag by it's TagName // para.style.backgroundColor = "black"; para.style.color = "green";Primero, debe saber que una ID debe estar ocupada solo por un elemento HTML . Es único, de lo contrario, se desordenaría cuando haga getElementById . Si desea hacer referencia a un elemento específico, puede usar querySelector para un solo elemento y querySelectorAll para varios elementos usando los selectores respectivos:
# para referir un elemento por Id.. para referir un elemento por Clase.Por ejemplo:
// Set all divs to have 300x150 and the border document.querySelectorAll('div').forEach(e => { e.style.width = '300px'; e.style.height = '150px'; e.style.border = '1px solid #000'; }); // Set style specifically for one element document.querySelector('#div_1').style.background = '#e8e8e8'; // Making all elements with class elem to have font family: serif document.querySelectorAll('.elem').forEach(e => { e.style.fontFamily = 'serif'; }); <p class="elem">Lorem Ipsum</p> <div class="elem" id="div_1">This is div 1</div> <div class="elem" id="div_2">This is div 2</div> PD Solo preste atención a que querySelectorAll no debe usarse para hacer referencia a varios elementos.