변경 CSS 값을 동적으로 jQuery를

Question

와 내가 사업부가 있습니다

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

이 CSS : jQuery를하기 때문에

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

:이 jQuery를이 속성과 클래스를 추가하는

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

CSS 에서처럼 :after을 할 수는 없지만 이런 식으로 생각했지만 실패했습니다. 무엇을 시도해야합니까?

감사

편집 : 색상은 jQuery를 동적으로 변경할 것, 항상 빨간색되지 않습니다.

Answer 1

그래서, 당신은 색상 값에 전달할 수 없습니다. 이 지점을 증명하기 위해 content 값을 전달할 수 있습니다. 그 메모에서 콘텐츠 또는 일부 디스플레이 또는 크기가 포함 된 레이아웃을 :after에 제공해야합니다.

여기는 해킹 된 해결 방법입니다. 나는 개인적으로 의사의 스타일을 사용하지 않는이 리팩토링 것입니다, 그러나 이것은 현재의 구현과 작동합니다

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

// example addStyle('red'); 

작업 데모 : http://jsfiddle.net/3qK2G/

Answer 2

당신이 할 수있는 일은 .badger-change에 배경색을 설정하고 .badger-change:after을 상속하는 것입니다.이 값은입니다.

.badger-change에서 background-color 및 너비에 그라디언트를 숨기려면으로 설정해야합니다.

DEMO(확인해보기 위하여 DIV를 올려)

DEMO 2

---

단지 클래스 전환없이 background-color 변경.

---

당신은 멀리 부모 컨테이너의 화면에서 픽셀의 1 픽셀로 설정 수백의 배경 이미지처럼, 상속과 다른 방법을 생각하고 의사 요소에 repeat으로 잘 살고 있습니다.

Answer 3

.badger-left 클래스를 변경하는 것은 어떻습니까? 이 같은 CSS를

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

:

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

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

Answer 4

전에이 트릭을 할 것입니다 추가되는 당신의 CSS에서 색상을 구축 그래서 이런 일을한다. 그런 다음 클래스 색상 나중에 새 클래스 badger-change

우리가 색을 변경하는 예를 들어 버튼을 사용

/* 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 

}); 

여기에 CSS로 badger-left을 변경 것이라고 변경.

HTML

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

예를 들어 badger-left에 대한 몇 가지 예를 내용.

페이지가로드 될 때 badger-left에는 BG가 빨간색 인 새 클래스 badger-change이 주어집니다. 그런 다음 버튼이 jQuery를 실행하여 클래스 BG 색상을 파란색으로 변경합니다. 그 대신 기준의 문자열로 해석되기 때문에

JSFiddle Example