当用户点击HTML元素时，如何更改HTML元素的颜色？

My problem is so simple, that I cannot believe that there is no HTML/CSS based solution for iOS 4 and above.

我的问题很简单,我无法相信iOS 4及更高版本没有基于HTML / CSS的解决方案。

I have grid of images, each subtitled with a single line of gray text. The text is bordered by lines at the top and at the bottom.

我有图像网格,每个图像都有一行灰色文字。文本以顶部和底部的线条为界。

When the user taps down on the element (the image or the subtitle) the text and the lines should change the color to white and resets the color, when he lifts the finger again. I would even be better, if an additional line would appear at the top of the image. The whole element is encapsulated in a div.

当用户轻敲元素(图像或字幕)时,文本和线条应该将颜色更改为白色,并在他再次抬起手指时重置颜色。如果图像顶部会出现一条额外的线条,我甚至会更好。整个元素封装在div中。

I already tried to use the CSS properties -webkit-tap-highlight-color, -webkit-active-link and :hover, :active on the div or various subelements, without any success so far.

我已经尝试在div或各种子元素上使用CSS属性-webkit-tap-highlight-color,-webkit-active-link和:hover,:active,到目前为止没有任何成功。

As suggested I tried this document

正如建议我尝试这个文件

<!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>

with this style sheet

用这个样式表

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

But this also seems not to work.

但这似乎也行不通。

2 个解决方案

#1

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

Since you're not into JS - here's the complete script for you:

既然你没有进入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>

Put it after your element's tag.

把它放在元素的标签之后。

Here something even better:

这里有更好的东西:

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

Put the code above in the <head> element. All left to do is to add to your element theese atts:

将上面的代码放在元素中。剩下要做的就是添加你的元素theese atts:

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

e.g. <div id='element' onmousedown='changeClr( "element" , "#f00" );' onmouseup='changeClr( "element" , "#000" );'></div>

例如

That code allows you to change color of any element by adding theese atts.

该代码允许您通过添加theese atts来更改任何元素的颜色。

#2

The -webkit-tap-highlight-color is just what happens when a user taps something, it isn't an "on/off" state. You must use Javascript as Michael notes to effect the changes.

-webkit-tap-highlight-color就是当用户点击某些东西时发生的事情,它不是“开/关”状态。您必须使用Javascript作为Michael备注才能实现更改。

#1

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