web蓝桥杯真题:冰墩墩心情刻度尺

代码:

javascript 复制代码
// TODO: 待补充代码
BingDunDun.className='BingDunDun not-satisfied'
range.onchange = (e) => {
  let value = Number(e.target.value); // value 进度条的值
  // TODO: 待补充代码
  if(value == 25) {
    BingDunDun.className='BingDunDun a-little-unsatisfied'
  } else if(value == 50) {
    BingDunDun.className='BingDunDun ordinary'
  } else if(value == 75) {
    BingDunDun.className='BingDunDun satisfied'
  } else if(value == 100) {
    BingDunDun.className='BingDunDun great'
  } else {
    BingDunDun.className='BingDunDun not-satisfied'
  }
};

考察:

元素添加类名:element.className='class1 class2'

此外,

行内样式操作:element.style.width = '250px'

给元素添加样式:element.classList.add(newClassName)

给元素移除样式:element.classList.remove(oldClassName)

className和classList.add的区别:

前者是直接替换原来的类名,后者是在原类名基础上再加一个类名

相关推荐
Mintopia几秒前
Next.js 单元测试究竟该选 JTest 还是 Vitest?
前端·javascript·next.js
Alice-YUE2 分钟前
【CSS学习笔记3】css特性
前端·css·笔记·html
bug_kada2 分钟前
告别页面卡顿!用DocumentFragment打造高性能DOM操作
前端
遂心_3 分钟前
深入浅出 querySelector:现代DOM选择器的终极指南
前端·javascript·react.js
遂心_6 分钟前
DOM元素内容修改全攻略:从innerHTML到现代API的最佳实践
前端·javascript·react.js
溯水流光7 分钟前
React 源码解析
前端
光影少年10 分钟前
Typescript工具类型
前端·typescript·掘金·金石计划
北风GI14 分钟前
如何在 vue3+vite 中使用 Element-plus 实现 自定义主题 多主题切换
前端
月亮慢慢圆15 分钟前
网络监控状态
前端
_AaronWong20 分钟前
实现 Electron 资源下载与更新:实时进度监控
前端·electron