如何从jquery中找出css值答案

【问题标题】：How to find out a css value from jquery如何从jquery中找出css值
【发布时间】：2014-04-04 00:03:32
【问题描述】：

我有以下代码，可让我在单击日历时将事件的颜色更改为红色。

 eventClick: function(calEvent, jsEvent, view) {
   $(this).css('border-color', 'red');
 }

我想要做的是允许用户通过简单的点击来改变颜色，这样它就会从红色变成绿色到蓝色到黄色等等。

     eventClick: function(calEvent, jsEvent, view) {
       if red then 
           $(this).css('border-color', 'green');
       else if green
           $(this).css('border-color', 'blue');
        etc
 }

所以我想“找出”现在的颜色是什么，如果红色变成蓝色，如果蓝色变成绿色等等。我只会有大约 5 种颜色。

【问题讨论】：

如果你使用类和委托事件，循环会自行构建。
and because i'm feeling generous, here's an example
你就是男人！非常感谢 :) 太好了
我无法检测当前的 css 类，因为事件颜色最初没有像您的示例中那样设置。我使用arshaw.com/fullcalendar，它设置每个事件的颜色如下： backgroundColor: 'blue'。

标签： javascript jquery css json

【解决方案1】：

你需要这个：

$("#id").css("border-left-color")

下面会返回一个空字符串，

$(this).css('border-color');

border-color 属性实际上设置了border-top-color、border-right-color、border-bottom-color、border-left-color这4个属性，它是所有这些速记props的组合。如果要获取边框颜色，则需要指定哪一侧。像这样说：border-left-color $("#id").css("border-left-color")。这应该足够了，因为我期望每一面都有相同的 colot。

【讨论】：

【解决方案2】：

getter 与调用 setter 的函数调用相同，尽管没有值：

$(this).css('border-color');

http://api.jquery.com/css/

请注意，从 getter 返回的值可能不是您所期望的。来自文档：

请注意，元素的计算样式可能与样式表中为该元素指定的值不同。例如，尺寸的计算样式几乎总是像素，但它们可以在样式表中指定为 em、ex、px 或 %。不同的浏览器可能会返回逻辑上但文本上不相等的 CSS 颜色值，例如 #FFF、#ffffff 和 rgb(255,255,255)。

因此，我建议您将颜色分配给特定的类，然后根据需要测试和交换类。

@zzzzBov 在 jsFiddle 上发布了一个很好的例子：http://jsfiddle.net/cT3c5/

【讨论】：

你试过了吗？ jsfiddle.net/uHrH9 FF 不返回任何内容，而 chrome 返回 rbg
非常感谢，我注意到它返回 rgb 值，例如黄色为 0,0,255，我可以将其转换为例如“黄色”这个词？？
是的，我试过了，我知道它的作用。如果您决定走这条路，则需要阅读有关该函数的文档以了解它的工作原理并解决响应值。有一个更简单的方法（在我看来），我会用建议更新答案。
@HarryBoy 尽管我不会为一个元素绑定 3 个处理程序，但您应该使用添加类路由，只需检查红色类是否存在并相应地更改颜色jsfiddle.net/cT3c5/1

【解决方案3】：

获取元素的css属性：

var element = document.getElementById('myElementId'),
style = window.getComputedStyle(element),
color = style.getPropertyValue('color');

FIDDLE

【讨论】：

【解决方案4】：

我建议将所有样式工作委托给 CSS。与通过 JS 设置内联样式相比，打开和关闭类是更改样式的更好方法，因为您可以在不影响 JS 代码的情况下更改事物的工作方式。

Ideally you'd be able to delegate the event handler so that you can use different callbacks for different selectors.

如果你被限制使用相同的回调，你仍然可以切换类，你只需要检查点击回调中的状态：

eventClick: function(calEvent, jsEvent, view) {
    var $this,
        add;
    if ($this.is('.a')) {
        add = 'b';
    } else if ($this.is('.b')) {
        add = 'c';
    } else {
        add = 'a';
    }
    $this.removeClass('a b c').addClass(add);
}

【讨论】：