Question

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

 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
 }

所以我想找到＆＃39;如果当前颜色是什么，如果红色变为蓝色，如果蓝色变为绿色等，我将只有大约5种颜色。

Answer 1

getter与调用setter的函数调用相同，虽然没有值：

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

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

请注意，从getter返回的值可能与您的预期不符。来自文档：

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

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

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

Answer 2

你需要这个：

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

以下将返回一个空字符串

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

border-color属性实际上设置了4个属性border-top-color，border-right-color，border-bottom-color和border-left-color，它是所有这些速记道具的组合。如果要获取边框颜色，则需要指定哪一边。这样说：border-left-color $（“＃id”）。css（“border-left-color”）。这应该足够了，因为我期望每一方都有相同的结果。

Answer 3

获取元素的css属性：

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

FIDDLE

Answer 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);
}

如何从jquery中找出css值

4 个答案: