1、首先输入下方的代码:
<body>
<div id="div1" style="width:100pxheight:100pxbackground:red"></div>
</body>
<script>
var vDiv = document.getElementById('div1')
2、然后点击输入下方的代码:
oDiv.onclick=function(){
if(this.style.backgroundColor == 'red'){
this.style.backgroundColor = '#000'
}else{
this.style.backgroundColor = 'red'
}
}
</script>
3、然后这样就完成了。
so eazy
我只能告诉你思路~因为我懒的给你打代码
首先获取到对象~你JS的画用dom
然后实现第一步,点击选择 通过onclick 事件触发~然后改变得到dom对象的背景颜色style
第二次点击 也是同一个function,这里要处理一下需要做判断~如果dom里的style的背景颜色是有值的,那么就清空,如果不是则加上背景颜色
button{background:#fff
}
button.active{
background:red
}
假设上边的css表示button的俩种状态,正常状态和选中状态
<button type='button' id="btn">按钮</button>这个是按钮
var btn = document.getElementById('btn')btn.onclick=function(){//添加点击事件
if(btn.className.indexOf('active')){ //说明已经是选中状态
btn.className = ''//清空class。
}else{
btn.className = 'active'//否则选中它,给它添加active样式
}
}
//如果用jquery,会很方便实现
$('#btn').click(function(){//给id为btn的元素添加点击事件
$(this).toggleClass('active')//每次点击的时候,将当前的元素切换active样式
//如果有,则去掉,否则添加
})