当用户点击一个HTML元素时，我该如何改变它的颜色？

Question

当用户点击一个HTML元素时，我该如何改变它的颜色？

3

我的问题非常简单，我无法相信在iOS 4及以上的系统中没有基于HTML/CSS的解决方案。我有一个图像网格，每个图像都带有一行灰色文字标题，该标题由上下两条线框定。当用户点击元素（图像或标题）时，文本和线条应更改为白色，并在再次抬起手指时重置颜色。如果在图像顶部出现额外的一条线，会更好。整个元素被封装在一个

中。我已经尝试使用CSS属性-webkit-tap-highlight-color、-webkit-active-link和:hover、:active等来控制div或其各种子元素，但迄今为止都没有成功。根据建议，我试过了这个文档。

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="highlight.css" />
    <style type="text/css"></style>
    <script type="text/javascript">
      div = document.getElementById('element');
      div.ontouchstart = function(){this.style.backgroundColor = '#fff';} // on tapping
      div.ontouchend = function(){this.style.backgroundColor = '#000';} // on releasing
    </script>
   <title></title>
  </head>
  <body>
    <div id="element">
      <p>Dies ist noch ein Test.</p>
      <p>Wenn man auf <a href="#">diesen etwas laengeren Link </a> tappt, sollte was     passieren.</p>
    </div>
  </body> 
</html>

使用这个样式表

#element {
    width:200px;
    height:200px;
    border:solid;
    border-color:blue;
    -webkit-user-select:none;
}

但是这似乎也不起作用。

- tomk

:hover 和 :active 伪类只能在 A 标签上使用... - Leon

1

@Leon：绝对不是这样。hover在表格元素和div上也可以正常工作。 - Michael Sazonov

抱歉，我的意思是“在IE6中”，与WebKit浏览器无关。 - Leon

2个回答

2

-webkit-tap-highlight-color是用户点击某个元素时发生的效果，而不是“开/关”状态。如Michael所述，您必须使用Javascript来实现更改。

- Matt H

啊，抱歉。如果用户再次抬起手指，它应该再次将颜色更改为灰色。 - tomk

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Sazonov · Accepted Answer

div = document.getElementById('#DIV');
div.onmousedown = function(){this.style.backgroundColor = ###;} // on tapping
div.onmouseup = function(){this.style.backgroundColor = ###;} // on releasing

既然您不了解JS - 这是完整的脚本：

<script>
div = document.getElementById('elem');
div.onmousedown = function(){this.style.backgroundColor = '#f00';} // on tapping
div.onmouseup = function(){this.style.backgroundColor = '#000';} // on releasing
</script>

将其放置在元素标签之后。

这里甚至更好：

<script>
function changeClr( id , clr ){
    document.getElementById( id ).backgroundColor = clr;
}
</script>

将上述代码放在 <head> 元素中。剩下的就是将这些属性添加到您的元素中：

onmousedown='changeClr( "id" , "#f00" );' onmouseup='changeClr( "id" , "#000" );'

例如：<div id='element' onmousedown='changeClr( "element" , "#f00" );' onmouseup='changeClr( "element" , "#000" );'></div>

该代码允许您通过添加这些属性来更改任何元素的颜色。