我有一個div：更改CSS值動態與jQuery

<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的動態變化，也不會永遠是紅色的。

來源

2014-04-18 Dan P.

http://codepen.io/gc-nomade/pen/qxFIC/:)是否很好？ –

我喜歡這裏的答案，它顯示瞭解決這個問題的一些不同的思想流派，我知道你可能無法在你的項目中實現SASS，但我只是想知道如果這樣做會容易得多正在使用SASS創建CSS。 –

所以，你不能在一個顏色值傳給它，因爲它會被解釋爲一個字符串，而不是一個參考。您可以通過content值來證明這一點。在那個筆記上，你需要給你的:after一些佈局，無論是內容或一些顯示或尺寸。

這裏是一個hacky解決方法。我會親自重構這個不使用僞風格，但是這將與當前的工作實現：

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

// example addStyle('red');

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

來源

2014-04-18 21:51:19 AlienWebguy

非常好，非常感謝:) –

你可以做的是設置背景顏色.badger-change並且有.badger-change:after繼承這個值。

在.badger-change你需要設置一個background-color和隱藏它寬度梯度上。

DEMO（懸停div來看到它在行動）

DEMO 2只改變background-color無需切換的類。

你能想到的其他方法與繼承，等的1個像素設置數百像素的從屏幕在父容器離開的背景圖像和在僞元素設置好的爲repeat。

來源

2014-04-18 21:33:18

如何改變.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; 
}

來源

2014-04-18 21:33:44 Richard

嗨，對不起，我沒有指定它 - 顏色將從jQuery動態變化，並且可以有許多不同的顏色。如果我無法獲取attr'bg-color'顏色表單，我想我可以只添加多個cs類。 –

@DanyP檢查我的例子，而不是交換類，只需切換bg-color http://codepen.io/gc-nomade/pen/wtnxa/或沒有類，只需bg http://codepen.io/gc-nomade/筆/ qxFIC/ –

它被添加會做的伎倆之前建立的顏色在你的CSS。然後改變的類的顏色以後將與新類badger-change

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 

});

這裏我們使用一個按鈕用於改變顏色的例子改變badger-left。

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 Example

來源

2014-04-18 21:45:55 WASasquatch

更改CSS值動態與jQuery

回答

CSS

jQuery的

HTML

JSFiddle Example

相關問題