Tengo este pequeño código aquí y, según los registros de la consola, puedo ver que aparentemente cambió, pero en la pantalla no cambia. ¿Qué podría estar saliendo mal?
JS vainilla abajo
const gameItem = document.querySelectorAll('.game-item'); const gameItemS = document.querySelector('.game-item'); document.addEventListener('DOMContentLoaded', () => { titleSize(gameItem); }); const titleSize = (gameItem) => { [...gameItem].forEach((title) => { let textSize = window .getComputedStyle(title, null) .getPropertyValue('font-size'); let gameTitle = title.innerText; // console.log(gameTitle, gameTitle.length, textSize); if (gameTitle.length > 7) { textSize = '5px'; console.log( 'The font on this was changed: ' + gameTitle, gameTitle.length, textSize ); } }); };html a continuación
<section class="games"> <h1>Games</h1> <ol class="container"> <li class="game-item">Halo<img src="" /></li> <li class="game-item">Pokemon<img src="" /></li> <li class="game-item"> Animal Crossing<img src="" /> </li> <li class="game-item">Genshin Impact<img src="" /></li> <li class="game-item">Skyrim<img src="" /></li> </ol> </section>Asignar a textSize solo cambia el valor de esa variable, no tiene ningún efecto en el elemento. Cuando let textSize = /*...*/.getPropertyValue('font-size'); , que simplemente copia el valor del objeto de estilo calculado en la variable. No hay un vínculo permanente entre la variable y ese objeto de estilo calculado. (Incluso si lo hubiera, la asignación al objeto de estilo calculado no cambiará el elemento).
Para cambiar el estilo del elemento, debe asignarlo a title.style.fontSize (o title.style["font-size"] ):
const gameItem = document.querySelectorAll('.game-item'); const gameItemS = document.querySelector('.game-item'); document.addEventListener('DOMContentLoaded', () => { titleSize(gameItem); }); const titleSize = (gameItem) => { [...gameItem].forEach((title) => { let textSize = window .getComputedStyle(title, null) .getPropertyValue('font-size'); let gameTitle = title.innerText; // console.log(gameTitle, gameTitle.length, textSize); if (gameTitle.length > 7) { title.style.fontSize = '5px'; console.log( 'The font on this was changed: ' + gameTitle, gameTitle.length, textSize ); } }); }; <section class="games"> <h1>Games</h1> <ol class="container"> <li class="game-item">Halo<img src="" /></li> <li class="game-item">Pokemon<img src="" /></li> <li class="game-item"> Animal Crossing<img src="" /> </li> <li class="game-item">Genshin Impact<img src="" /></li> <li class="game-item">Skyrim<img src="" /></li> </ol> </section>