当用户点击它时，如何更改 HTML 元素的颜色？
Posted
技术标签:
【中文标题】当用户点击它时，如何更改 HTML 元素的颜色？【英文标题】：How do I change the color of a HTML element, when user taps on it? 【发布时间】：2011-11-30 14:44:11 【问题描述】：我的问题是如此简单，以至于我无法相信 ios 4 及更高版本没有基于 html/CSS 的解决方案。
我有图像网格，每个图像都带有一行灰色文本。文本在顶部和底部以线条为边界。
当用户点击元素（图像或字幕）时，文本和线条应将颜色更改为白色并重置颜色，当他再次抬起手指时。如果图像顶部会出现一条额外的线，我会更好。整个元素封装在div中。
我已经尝试在 div 或各种子元素上使用 CSS 属性 -webkit-tap-highlight-color、-webkit-active-link 和 :hover、:active，但到目前为止没有任何成功。
按照建议，我尝试了此文档
<!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;
但这似乎也行不通。
【问题讨论】：
:hover 和 :active 伪类仅适用于 A 标签... @Leon：绝对不是这样。悬停也适用于表格元素和 div。 对不起，是要添加“in IE6”，但与WebKit浏览器无关...... 【参考方案1】：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> 元素中。
剩下要做的就是将这些 atts 添加到您的元素中：
onmousedown='changeClr( "id" , "#f00" );' onmouseup='changeClr( "id" , "#000" );'
例如<div id='element' onmousedown='changeClr( "element" , "#f00" );' onmouseup='changeClr( "element" , "#000" );'></div>
该代码允许您通过添加这些属性来更改任何元素的颜色。
【讨论】：
会影响文字和线条的颜色吗？你说的###到底是什么意思？ （抱歉，我目前还没有接触 JavaScript） 看一下代码；它会影响您正在调用的元素的背景颜色 - “#DIV”。如果您将backgroundColor 更改为color - 它会影响“#DIV”内的文本。 ### 表示颜色代码，例如'#f00' 会给你红色，还有#FF0000;
非常感谢您的帮助。但它也不起作用。再次查看我的问题。
很抱歉我不够清楚。脚本标签应该在你的元素标签之后。否则它不会工作，因为脚本会尝试操作一个尚未创建的对象。
让我们continue this discussion in chat【参考方案2】：
-webkit-tap-highlight-color 只是用户点击某物时发生的情况，它不是“开/关”状态。您必须按照 Michael 的说明使用 Javascript 才能使更改生效。
【讨论】：
啊，对不起。如果用户再次抬起取景器，它应该再次将颜色变为灰色。以上是关于当用户点击它时，如何更改 HTML 元素的颜色？的主要内容，如果未能解决你的问题，请参考以下文章