我在這里有這個小代碼，通過控制臺日志我可以看到它明顯改變了，但在顯示幕上它沒有改變。可能出了什么問題？
下面的 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>
uj5u.com熱心網友回復：
分配給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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/469070.html
標籤：javascript html css 前锋 字体大小