如何单击链接并获取其颜色？答案

【问题标题】：How to click on a link and get its color?如何单击链接并获取其颜色？
【发布时间】：2012-08-26 09:00:08
【问题描述】：

好的，这听起来很简单，使用 jquery 的“点击”功能。

问题是我想要链接的原始颜色而不是其悬停颜色 - 例如如果链接为绿色且悬停状态为橙色，我将抓住绿色。

我已尽我所能，并在fiddle 中展示了它

有人有什么想法吗？

编辑： 抱歉，但正如许多鹰眼已经发现（感谢他们指出）绿色实际上是“rgb(0, 128, 0)”，而不是 rgb(0 , 255, 0) 如我原来的小提琴所示。

【问题讨论】：

<a href="#" data-color="orange">my link</a>
Green 对我来说是 (0, 128, 0)，顺便说一句。

标签： jquery css jquery-selectors anchor

【解决方案1】：

将其存储在jQuery's data对象中：

$('a').each(function() {
    $(this).data('color', $(this).css('color') );
})
.click(function() {
    alert( $(this).data('color') );
});

这是你的小提琴：http://jsfiddle.net/sVDYe/4/

为了获得更好的性能，我会在循环中使用the static methods。 They're much faster:

$('a').each(function() {
    $.data(this, 'color', $.css(this, 'color') );
});

这是小提琴：http://jsfiddle.net/sVDYe/13/

【讨论】：

噢噢噢，真是太聪明了！！我到处搜索了几天，它每次都击败我 - 谢谢！

【解决方案2】：

检查一下它肯定会工作

<script>
    $("a").click(function () {
      $(this).toggleClass("colorclass");
    });
</script>

【讨论】：

不是我要找的 - 我正在尝试获取颜色，而不是设置或切换它，但无论如何谢谢。

【解决方案3】：

试试下面的方法..

演示：http://jsfiddle.net/sVDYe/33/

$("a").click(function(e) {
    e.preventDefault();
    var tmpLink =$(this).clone();
    tmpLink.appendTo($(this).parent());    
    var acolor = tmpLink.css("color");
    tmpLink.remove();

    if (acolor == 'rgb(255, 165, 0)') {
        alert('wrong color - its ORANGE =' + acolor);
    } else if (acolor == 'rgb(0, 128, 0)') {
        alert('CORRECT color - its GREEN =' + acolor);
    }
});

正如pimvdb 指出的那样.. 绿色是RGB(0,128,0)

【讨论】：

@JosephSilber 你是什么意思？
恐怕这行不通，因为 CSS 规则可能非常具体。例如，如果规则为 .container > a { color: ... }，则此操作将失败，因为它与克隆不匹配。
链接的颜色会受到样式表的影响，这使得它依赖于它的祖先（也可能是它的兄弟）。
@JosephSilber 啊我明白你的意思.. 谢谢.. 检查更新后的固定版本:) tmpLink.appendTo($(this).parent());
仍然不是防弹的 :) 例如，考虑一个带有 :first-child 的选择器。

【解决方案4】：

这样试试

http://jsfiddle.net/dadviegas/hfHBh/

【讨论】：

【解决方案5】：

您可以使用 Jquery 而不是 css 来处理颜色变化并存储它：

http://jsfiddle.net/sVDYe/20/

var hoverColor;

$("a").hover(function () {
  hoverColor = $(this).css("color");
  $(this).css("color", 'orange');
}, function () {
  $(this).css("color", 'green');
});

$("a").click(function (e) {
  e.preventDefault();
  var acolor = hoverColor;
  if (acolor == 'rgb(255, 165, 0)') {
    alert('wrong color - its ORANGE =' + acolor);
  } else if (acolor == 'rgb(0, 128, 0)') {
    alert('CORRECT color - its GREEN =' + acolor);
  }
});

也是绿色的

rgb(0, 128, 0)

【讨论】：