代码:
// 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的区别:
前者是直接替换原来的类名,后者是在原类名基础上再加一个类名