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样式可以为网页提供动态和交互的效果,但需要注意以上事项以确保代码的可维护性和兼容性。
相关推荐
还有多远.8 分钟前
jsBridge接入流程
前端·javascript·vue.js·react.js
w2sfot26 分钟前
Passing Arguments as an Object in JavaScript
开发语言·javascript·ecmascript
烛阴40 分钟前
【TS 设计模式完全指南】从零到一:掌握TypeScript建造者模式,让你的对象构建链式优雅
javascript·设计模式·typescript
郝学胜-神的一滴41 分钟前
避免使用非const全局变量:C++中的最佳实践 (C++ Core Guidelines)
开发语言·c++·程序人生
搞一搞汽车电子1 小时前
S32K3平台eMIOS 应用说明
开发语言·驱动开发·笔记·单片机·嵌入式硬件·汽车
前端Hardy1 小时前
HTML&CSS:有趣的漂流瓶
前端·javascript·css
前端Hardy1 小时前
HTML&CSS :惊艳 UI 必备!卡片堆叠动画
前端·javascript·css
无羡仙2 小时前
替代 Object.freeze 的精准只读模式
前端·javascript
总有刁民想爱朕ha2 小时前
车牌模拟生成器:Python3.8+Opencv代码实现与商业应用前景(C#、python 开发包SDK)
开发语言·python·数据挖掘
toooooop82 小时前
本地开发环境webScoket调试,保存html即用
前端·css·websocket