Question

html网页上的按钮，被按下的瞬间改变颜色，高手请进。。。在线等啊

是手机网页哦，就像微信通信录，点击好友的名字，背景变成绿色，就是手指触摸屏幕的瞬间，我试过a：active{} 在手机上无效的，用function mDown(obj)，function mUp(obj)也不行

Answer 1

1、先构造一个按钮。

2、再自定义一个函数，用来控制按钮的颜色和标签。

3、我们让按钮可以执行自定义函数，就需要把自定义函数作为参数，传给按钮的command。

4、用for语句创建两个这样的按钮。由于在自定义函数里面，也是用了for语句处理所有的按钮，所以这些按钮都会同时变色。

5、如果把36个按钮排成6行6列，需要用到grid方法。

注意事项：

HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

Answer 2

ontouchstart 和 ontouchend

<script type="text/javascript">
window.onload = function() {
    var friend = document.getElementById("friend");
    // 触摸
    friend.ontouchstart = function() {
        // 背景变绿
        this.style.backgroundColor = "green";
    };
    // 停止触摸
    friend.ontouchend = function() {
        // 还原白色
        this.style.backgroundColor = "white";
    };
};
</script>

<div id="friend">uybb2</div>

追问

可以了可以了，非常感谢，不过我还有一个问题，是不是必须用ID，我用class就无效了？
还有就是我把 id="friend"，换成 id="back"也无效，到底怎么回事呢，还请指点啊，帮我弄好了我再加100分给你，感谢！！！

追答

不是一定要用 id，class 也是可以的，只要确认找到对应的元素。

例如我上面写的，getElementById("friend"); 和 这里两个 friend 要对应，id 在一个页面中是唯一的，只能使用一次。

如果有很多元素需要这个效果，那就应该用 class，或者找到对应的标签，例如

好友A

好友B

好友C

// 获取全部 class 为 friend 的元素，即上面三个 a

var friends = document.getElementsByClassName("friend");
// 循环

for(var i = 0; i < friends; i++) {
(function(a) {
friends[a].ontouchstart =function() {
this.style.backgroundColor ="green";
};
friends[a].ontouchend =function() {
this.style.backgroundColor ="white";
};
})(i);

}

用原生 JavaScript 写代码比较麻烦，建议你用 jQuery，简单方便而且不用过多考虑兼容问题。

追问

那你有这种JQ代码吗，我找过没找到呢

追答

$(function() {

$(".friend").on("touchstart", function() {
$(this).css({background: "green"});

}).on("touchend", function() {
$(this).css({background: "white"});
});
});

$(".friend") 是选择器，表示全部 class 为 friend 的元素，如果是 id，写成 #friend。

追问

OK了，还是JQ最简单，最后再问一个问题，有点不好意思了，就是我要同时改变背景色和背景图片，应该怎么表示，因为我的背景为PNG图，我用了上面这个JQ停止触摸后，背景图就没了呢

追答

没关系，有问题继续追问就行

$(this).css({background: "#0f0 url(触摸背景图片地址.png) no-repeat"});

前面 #0f0 是背景颜色，后面的 url 是图片地址。

引号里的写法和 CSS 中的写法是一样的。

追问

那这个背景图的大小和定位的座标不好表示啊

追答

把背景的各个属性都给你写出来吧

$(this).css({
// 背景颜色
backgroundColor: "#0f0",
// 背景图片
backgroundImage: "url(图片地址.png)",
// 背景图片大小
backgroundSize: "50% 50%",
// 背景图片定位
backgroundPosition: "50px 20px",
// 背景图片重复
backgroundRepeat: "no-repeat"

});

根据你的实际情况自己修改一下属性值

追问

可以了，太谢谢你了！！！！

Answer 3

没搞过手机的，坐等。。。

Answer 4

你可以考虑用图片代替按钮

追问

用图片这个问题也没解决啊，点击的瞬间如何改变按钮图片呢？

追答

这个你可以用鼠标移上去就变换背影

追问

手机网页啊，哪来的鼠标呀