JavaScript操作CSS样式

上节课我们基本完成了游戏的主体，这节课我们来学习如果使用JavaScript去操作CSS样式
● 例如，我们现在想当玩家输入对的数字之后，我们讲背景改为绿色，并且把number的框宽度变大

const secretnumber = Math.trunc(Math.random() * 20) + 1;

let score = 20;
document.querySelector('.number').textContent = secretnumber;

document.querySelector('.check').addEventListener('click', function () {
  const guess = Number(document.querySelector('.guess').value);
  console.log(guess);

  if (!guess) {
    document.querySelector('.message').textContent = '⛔No Number';
  } else if (guess === secretnumber) {
    document.querySelector('.message').textContent = '🎉Correct Number';

    document.querySelector('body').style.backgroundColor = '#60b347';
    document.querySelector('.number').style.width = '30rem';
  } else if (guess > secretnumber) {
    if (score > 1) {
      document.querySelector('.message').textContent = '📈Too high';
      score--;
      document.querySelector('.score').textContent = score;
    } else {
      document.querySelector('.message').textContent = '😭You lost the game!';
      document.querySelector('.score').textContent = 0;
    }
  } else if (guess < secretnumber) {
    if (score > 1) {
      document.querySelector('.message').textContent = '📉Too low';
      score--;
      document.querySelector('.score').textContent = score;
    } else {
      document.querySelector('.message').textContent = '😭You lost the game';
      document.querySelector('.score').textContent = 0;
    }
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

在JavaScript中操作CSS样式时，有几个注意事项需要牢记：

1. 使用元素的style属性：可以直接通过元素的style属性访问和修改其内联样式。例如，可以使用element.style.property = value的语法来设置元素的样式属性。
2. 使用classList属性：元素的classList属性提供了添加、删除和切换类名的方法。可以使用element.classList.add(‘class-name’)添加一个类名，element.classList.remove(‘class-name’)移除一个类名，element.classList.toggle(‘class-name’)切换一个类名的状态。
3. 避免直接修改元素的style属性：最好不要直接修改元素的style属性，这会将样式与JavaScript代码耦合在一起，使代码难以维护和理解。推荐使用CSS类来管理样式，并通过添加或删除类名来改变样式。
4. 使用优先级控制：CSS样式具有优先级规则，通过选择器的特定性和层叠顺序来决定应用哪种样式。当使用JavaScript操作样式时，确保样式的特定性和层叠顺序不会产生意外的结果。可以使用element.style.setProperty(‘property’, ‘value’, ‘priority’)方法来指定优先级。
5. 考虑浏览器兼容性：不同浏览器对CSS属性和方法的支持可能不同。在使用JavaScript操作CSS样式时，要注意不同浏览器的兼容性问题，并进行必要的适配处理。
   总之，合理使用JavaScript操作CSS样式可以为网页提供动态和交互的效果，但需要注意以上事项以确保代码的可维护性和兼容性。