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

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

相关推荐
小飞悟几秒前
组件通信的艺术:从 props 钻井到 context 共享的进化之路
前端·javascript·设计模式
Mintopia1 分钟前
Three.js 中正切函数在相机视野里的那些事儿
前端·javascript·three.js
Dream耀3 分钟前
掌握React useContext:轻量级状态共享与性能优化指南
前端·javascript·react.js
十盒半价4 分钟前
Stylus 伪元素:让 CSS 玩出 “无中生有” 的新花样
前端·css·trae
红衣信5 分钟前
React 中 useContext 的使用与状态共享详解
前端·react.js·面试
断竿散人5 分钟前
JavaScript 事件系统完全指南:从事件流原理到现代化事件处理实战
前端·javascript
梨子同志6 分钟前
Vue 生命周期
前端·vue.js
Point6 分钟前
[ahooks] useEventEmitter源码阅读
前端·javascript·设计模式
梨子同志6 分钟前
Vue 组件通信详解
前端·vue.js
carrieXin6 分钟前
Angular 可复用动态表单组件封装
前端