Puedo corregir el cambio entre un menú desplegable que se muestra y se oculta cuando hago clic en mi etiqueta de entrada, pero cuando la consola registra el estilo que se muestra, no aparece nada en la consola. ¿Cuál es la explicación para no poder ver esto y cómo intentaría ver correctamente qué estilo de visualización utilicé?
document.getElementById('search').addEventListener("click", function () { const grid1 = document.querySelector(".modal"); grid1.style.display = grid1.style.display ? "none" : "flex"; console.log(grid1.style.display); });En lugar de usar 'yourelement.style.display', use la función 'getComputedStyle' para obtener el valor de cualquier propiedad en este caso, 'display', porque el estilo Computed contiene todas las propiedades CSS establecidas en un elemento. Incluso si no establece una propiedad para un elemento. Seguirá encontrando esa propiedad en los estilos calculados.
Modificando su código con 'getComputerStyle'
document.getElementById('search').addEventListener("click", function () { const grid1=document.querySelector(".modal") console.log(window.getComputedStyle(grid1).display) grid1.style.display = window.getComputedStyle(grid1).display == "none" ? "flex" : "none"; console.log(window.getComputedStyle(grid1).display) }) .modal { display: none; } <input id="search"> <select class="modal"></select>Para obtener más aclaraciones, consulte Window.getComputedStyle() en MDN Web Docs