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的区别:

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

相关推荐
vvilkim1 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
ai小鬼头3 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz3 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子3 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边3 小时前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客3 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
weiweiweb8883 小时前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
幼儿园技术家3 小时前
微信小店与微信小程序简单集成指南
前端
我不吃饼干9 天前
鸽了六年的某大厂面试题:你会手写一个模板引擎吗?
前端·javascript·面试
涵信9 天前
第一节 布局与盒模型-Flex与Grid布局对比
前端·css