js怎么实现点击选中,再次点击取消。

JavaScript06

js怎么实现点击选中,再次点击取消。,第1张

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样式

                                  //如果有,则去掉,否则添加

})