代码之家 › 专栏 › 技术社区 › Red

为什么我的字体大小不适合香草js?

font-size foreach css html javascript

-1

Red · 技术社区 · 2 年前

我这里有一个小代码,通过控制台日志,我可以看到它明显改变了,但在显示屏上它没有改变。出了什么问题?

下面是JS香草

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

            <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>

1 回复 | 直到 2 年前

T.J. Crowder 2 年前

分配给 textSize 变量对它没有任何影响。当你这么做的时候 let textSize = /*...*/.getPropertyValue('font-size'); ,它只是将计算样式对象中的值复制到变量中。变量和计算样式对象之间没有持续的联系。(即使有,指定给计算样式对象也不会更改元素。)

要更改元素的样式,必须将 title.style.fontSize (或 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>