如何從jquery中找出css值

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
 }

所以我想'找出'現在的顏色是什么，如果紅色變成藍色，如果藍色變成綠色等我將只有大約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');

小提琴

Answer 4

我建議將所有樣式工作委托給CSS。 打開和關閉類是一種比通過JS設置內聯樣式更好的方式來改變樣式，因為你可以改變工作方式，而不會影響JS代碼。

理想情況下，您可以委派事件處理程序，以便可以為不同的選擇器使用不同的回調 。

如果你被限制使用相同的回調，你仍然可以切換類，你只需要在點擊回調中檢查狀態：

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