跨文本颜色更改onclick,在发布时返回原始版本?

时间:2014-12-14 03:54:20

标签: html

我无法找到特定的代码应用程序,只需在按下按钮时更改span标签内的文本颜色,然后在发布时更改。

我已经看到过onclick事件可以与没有任何css样式的span结合但没有找到我可以应用于此的任何工作模型的引用。

有人有解决方案吗?我会给出一个需要css样式的答案,只是想尽可能保持简单。

更新:你可以对所有你喜欢的投票,我不会来这里问?如果我还没有花上几个小时看,我不想寻求帮助,如果我能弄明白的话我自己的我不看是否有人已经试图解决他们的问题。如果我可以提供帮助,我会这样做,但这种评论是一个令人讨厌的假设。

这些答案对你没有帮助。我正在使用js& amp;写的聊天盒根据我的喜好修改它的外观以下是我试图修改的按钮的代码部分。它没有验证,但外观&在我的网站上运行正常,但我无法弄清楚如何在点击时更改按钮文字颜色。

 <table width="279px" border="0" cellpadding="5" align="center">
 <tr>
 <th onclick="window.location="cursor:pointer;onMouseover="this.bgColor='#606060';" onMouseout="this.bgColor='';"><span style="outline: 1px solid #000000;display:inline-block;padding-bottom:1px;border:2px solid #888888;box-shadow:0px 0px 2px 1px #454545;background:#000000">
 <button onclick="set_cookie(); return clearMessageBox();" style="font-size:14px; font-family:arial; color:#1DBD01; font-weight:bold; border:1px solid black; background-color:#000000; height:33px">Click or hit enter to send message</button></span></th>

3 个答案:

答案 0 :(得分:0)

这将有效,但需要CSS。不幸的是,我没有为您提供无CSS的解决方案。

jQuery的:

$( "#target" ).mousedown(function() {
  $( ".myspan" ).toggleClass( "changeColor" );
});
$( "#target" ).mouseup(function() {
  $( ".myspan" ).toggleClass( "changeColor" );
});

HTML

<button id="target">Click me</button>
<span class="myspan">I am some really awesome text!</span>

CSS

span {font-size:3em;}
.changeColor {color:red;}

并链接到演示:http://jsfiddle.net/o73jk7es/1/

答案 1 :(得分:0)

你可以用纯css

来做

button:active ~span{color:red;font-size:150%;}
#secondButton:active {color:lime;font-weight:bold;box-shadow:2px 2px 2px lime;}
<button>The Button</button>
<span> The text</span>
<button id="secondButton"><span>2nd Button</span></button>
<button onmousedown="this.style.color='red'" onmouseup="this.style='inherit'"><span>Inline Style</span></button>

答案 2 :(得分:0)

我想出了我的答案? &安培;对比利的领导给了我这个主意。

此代码将在点击...

时为按钮文本提供不同的颜色
 css= button:active { color:#your color } but if you have several buttons & want to target a particular 1 then you do button:active span.one { color:#your color } & your button code looks like this....<button><span class="one">text</span></button>

因此关闭此案。欢呼所有