JavaScript操作CSS样式

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

javascript 复制代码
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;
    }
  }
});

在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样式可以为网页提供动态和交互的效果,但需要注意以上事项以确保代码的可维护性和兼容性。
相关推荐
Go Dgg15 分钟前
【Go + Gin 实现「双 Token」管理员登录】
开发语言·golang·gin
十五年专注C++开发41 分钟前
hiredis: 一个轻量级、高性能的 C 语言 Redis 客户端库
开发语言·数据库·c++·redis·缓存
WJ.Polar42 分钟前
Python数据容器-集合set
开发语言·python
晓131343 分钟前
JavaScript加强篇——第七章 浏览器对象与存储要点
开发语言·javascript·ecmascript
海底火旺1 小时前
浏览器渲染全过程解析
前端·javascript·浏览器
前端付豪1 小时前
15、前端可配置化系统设计:从硬编码到可视化配置
前端·javascript·架构
nbsaas-boot1 小时前
Go语言生态成熟度分析:为何Go还无法像Java那样实现注解式框架?
java·开发语言·golang
aPurpleBerry1 小时前
hot100 hot75 栈、队列题目思路
javascript·算法
颜漠笑年1 小时前
可迭代对象≠数组,一起来揭开for...of背后隐藏的秘密吧
前端·javascript
xiaocainiao8811 小时前
Python 实战:构建可扩展的命令行插件引擎
开发语言·python