当用户点击 HTML 元素时，如何更改它的颜色？
我的问题是如此简单，以至于我不敢相信没有针对 iOS 4 及更高版本的基于 HTML/CSS 的解决方案。
我有图像网格，每个图像都有一行灰色文本的副标题。文本的顶部和底部有线条边框。
当用户点击元素（图像或字幕）时，文本和线条应将颜色更改为白色，并在用户再次抬起手指时重置颜色。如果图像顶部出现一条附加线，我会更好。整个元素封装在 div 中。
我已经尝试使用 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;
}
，但这似乎也不起作用。
My problem is so simple, that I cannot believe that there is no HTML/CSS based solution for iOS 4 and above.
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.
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.
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
由于您不熟悉 JS - 这是适合您的完整脚本：
将其放在元素的标签后面。
这里有更好的东西：
将上面的代码放在
元素中。剩下要做的就是向元素添加这些属性：
例如
该代码允许您通过添加这些属性来更改任何元素的颜色。
Since you're not into JS - here's the complete script for you:
Put it after your element's tag.
Here something even better:
Put the code above in the
<head>element.All left to do is to add to your element theese atts:
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.
-webkit-tap-highlight-color正是用户点击某些内容时发生的情况，它不是“开/关”状态。正如 Michael 所说，您必须使用 Javascript 来实现更改。The
-webkit-tap-highlight-coloris 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.