首页 > 开发 > JS > 正文

怎么用js写按钮点击下去时颜色变深,松开按钮时未点击前的状态?

2017-09-05 05:51:31  来源:网友分享

用onmousedown和onmouseup同时绑定统一目标元素,但是只有第一个函数起作用
尝试用其他函数绑定,依旧只有第一个函数起作用
js代码如下:

//点击中间确定按钮

function confirmBtn(){    var aCenter = document.getElementById("confirmBtn");    aCenter.onmousedown = function () {        aCenter.style.boxShadow = "inset 0 0 50px #333";        console.log( aCenter );    }    aCenter.onmouseup = function(){        // aCenter.style.boxShadow = "0 0 0 transparent";        console.log( aCenter );    }}confirmBtn();

解决方案

1.确定只有第一个函数有用?我这边在控制台显示你的两个函数都console出来了,把第二个函数的注释去掉也可以有类似css active的效果。

function confirmBtn(){    var aCenter = document.getElementById("confirmBtn");    aCenter.onmousedown = function () {        aCenter.style.boxShadow = "inset 0 0 50px #333";        console.log( aCenter );    }    aCenter.onmouseup = function(){        aCenter.style.boxShadow = "0 0 0 transparent";        console.log( aCenter );    }}confirmBtn();

2.另外这个为什么要用js模拟呢?可以用css的:active伪类做。