使用jQuery動態更改CSS值

Question

我有一個div：

<div class="badger-left"></div>

此CSS：

/* Change style dynamically according to the bg-color attribute added to the div from jQuery */
.badger-change:after {
    background-color: attr(bg-color);
}

此jQuery添加一個屬性和一個類：

$('.badger-left').addClass('badger-change').attr('bg-color','red');

由於jQuery無法像CSS中那樣執行:after ，因此我想到了這種方式，但是失敗了。 我應該怎么做？

謝謝

編輯：顏色會從jQuery動態更改，它不會總是紅色。

Answer 1

您可以做的是在.badger-change設置背景顏色，並.badger-change:after 繼承此值.badger-change:after進行.badger-change:after

在.badger-change您需要設置background-color並將其隱藏在寬度上。

演示 （將div懸停以查看其運行情況）

---

DEMO 2僅更改background-color而無需切換類。

---

您可以想到其他帶有繼承的方法，例如1像素的背景圖像在父容器中距屏幕數百個像素，並在偽元素中設置為repeat 。

Answer 2

僅更改.badger-left的類怎么樣？ 所以做這樣的事情：

$('.badger-left').addClass('badger-red')
$('.badger-left').addClass('badger-blue')

用這樣的CSS：

.badger-red:after {
    background-color: red;
}

.badger-blue:after {
    background-color: blue;
}

Answer 3

因此，您不能將其傳遞給顏色值，因為它將被解釋為字符串而不是引用。 您可以傳遞content值來證明這一點。 關於這一點，您需要:after布局:after加上：內容或顯示或尺寸。

這是一個駭人的解決方法。 我個人將其重構為不使用偽樣式，但這將與您當前的實現一起使用：

function addStyle(color) {
    $('<style>.badger-left:after { background-color: ' + color + ';</style>').appendTo('head');
}

// example addStyle('red');

工作演示： http : //jsfiddle.net/3qK2G/

Answer 4

在添加顏色之前在CSS中建立顏色即可解決問題。 然后稍后更改該類的顏色將使用新的類badger-change更改the badger-left

的CSS

/* Change style dynamically according to the bg-color attribute added to the div from jQuery */
.badger-change {
    background-color: red;
}

jQuery的

$('.badger-left').addClass('badger-change'); // As soon as we're loaded add badger-change class

$('#button').click(function(){ // When example button is clicked

    $('.badger-change').css('backgroundColor', 'blue'); // change badger-change background to blue

});

在這里，我們使用一個按鈕作為更改顏色的示例。

的HTML

<div class="badger-left">Hello World</div>
<input type="button" id="button" value="Change it" />

例如， badger-left一些示例內容。

當頁面加載badger-left將給出新的badger-change ，BG為紅色。 然后，按鈕觸發jQuery，將BG類的顏色更改為藍色。

JSFiddle示例