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样式可以为网页提供动态和交互的效果,但需要注意以上事项以确保代码的可维护性和兼容性。
相关推荐
独立开阀者_FwtCoder2 分钟前
URL地址末尾加不加 "/" 有什么区别
前端·javascript·github
梦子要转行4 分钟前
matlab/Simulink-全套50个汽车性能建模与仿真源码模型9
开发语言·matlab·汽车
独立开阀者_FwtCoder5 分钟前
Vue3 新特性:原来watch 也能“暂停”和“恢复”了!
前端·javascript·github
前端小巷子29 分钟前
跨域问题解决方案:开发代理
前端·javascript·面试
JohnYan29 分钟前
Bun技术评估 - 07 S3
javascript·后端·bun
Mintopia30 分钟前
Three.js 材质与灯光:一场像素级的光影华尔兹
前端·javascript·three.js
天涯学馆31 分钟前
JavaScript 跨域、事件循环、性能优化面试题解析教程
前端·javascript·面试
北方有星辰zz35 分钟前
数据结构:栈
java·开发语言·数据结构
晴殇i42 分钟前
CSS 迎来重大升级:Chrome 137 支持 if () 条件函数,样式逻辑从此更灵活
前端·css·面试
Hilaku1 小时前
2025年,每个前端都应该了解的CSS选择器:`:has()`, `:is()`, `:where()`
前端·css