当前位置：文江博客话题详情

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

发布于 2024-12-18 22:39:02 字数 1378 浏览 1 评论 0 原文

我的问题是如此简单，以至于我不敢相信没有针对 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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

莳間冲淡了誓言ζ 2024-12-25 22:39:02

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>

将上面的代码放在元素中。
剩下要做的就是向元素添加这些属性：

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

例如

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

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:

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

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.

回复收藏 0 原文

世界如花海般美丽 2024-12-25 22:39:02

-webkit-tap-highlight-color 正是用户点击某些内容时发生的情况，它不是“开/关”状态。正如 Michael 所说，您必须使用 Javascript 来实现更改。

回复收藏 0 原文

~没有更多了~

关于作者

如若梦似彩虹

暂无简介

文章

27 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

櫻之舞

弥枳

m2429

寻找一个思念的角度

野却迷人

我怀念的。

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

櫻之舞

弥枳

m2429

寻找一个思念的角度

野却迷人

我怀念的。

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。