<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .blue{ background: #ccf; color:#339; } .pink{ background: #af3; color: #a62; } .dark{ background: #111; color: #eee; } </style></head><body><select name="" id="slt"> <option value="">请选则</option> <option value="blue">湛蓝天空</option> <option value="pink">芭比公主</option> <option value="dark">杀马特</option></select><script> ifBg() function ifBg(){ var val=localStorage[‘bg‘]; if (val){ document.body.className=val; } } var slt=document.getElementById(‘slt‘); slt.onchange=function(){ //选择的value // console.log(this.value) //获取用户选择option在列表中是第几项 var n=this.selectedIndex; if (n==‘1‘){ document.body.className=‘blue‘; localStorage[‘bg‘]=‘blue‘ }else if(n==‘2‘){ document.body.className=‘pink‘; localStorage[‘bg‘]=‘pink‘ }else if(n==‘3‘){ document.body.className=‘dark‘; localStorage[‘bg‘]=‘dark‘ } console.log(this.selectedIndex) }</script></body></html>
时间: 2024-08-05 12:23:47