클래스의 CSS 속성 부분을 DOM 요소에 적용

Question

이제는 문제가 훨씬 복잡해집니다. 나는 DOM 요소에 CSS 클래스를 적용하는 방법을 찾고 있지 않다, 나는 이미 내가 부품 DOM 요소에 클래스의 CSS 속성을 적용하려고 그 (<div class="MyCssCLass"></div>)

을 수행하는 방법을 알고있다.

가 있습니다

나는 다음과 같은 CSS로가 말한다 :

.MyClass 
{ 
    background-color:red; 
    color:blue; 
} 

지금은 MyDiv에만 배경색을 적용 할 말할 수

<div id="MyDiv">Some text</div> 

이 HTML 난 그냥 수행 할 수 없습니다

<div id="MyDiv" class="MyClass">Some text</div> 

CSS 색상 속성을 MyDiv 및 t 그의 것이 나쁠거야.

지금까지 왜 CSS 클래스를 자신의 CSS로 재정의 (override)하지 않는지 생각하고 있습니까? 또는 background-color:red;과 함께 다른 클래스 MyBckgrdClr을 만들고 MyDiv에 제공하면 어떨까요?

음 ... 인생을 항상 단순하게 말하는 것은 아닙니다. 여기

내가 동적으로 다른 <div>를 생성하고 그에게 MyClass CSS 클래스를 제공하고있다 :

그리고 내 모든 지혜

내가 jQuery를 사용하여 뭔가를 시도했다.

var MyClassElement = $('<div id="MyClassElement">').addClass('MyClass'); 

은 그 때 나는 지금 지금 크롬에서 큰하지만 너무 많이하지이 일을 MyDiv

$("#MyDiv").css("background", MyClassElement.css("background")); 

의 배경을 변경하려고합니다 body

$('body').append(MyClassElement); 

에 삽입합니다 모질라, IE, 오페라 ...

하지만 HEY! 나는 아직도 약간의 지혜가있다! 그래서 다른 것을 시도해보십시오!

자바 스크립트를 사용하면 어떻게됩니까? ...

document.getElementById('MyDiv').style.background = document.getElementById('MyClassElement').style.background; 

하지만 그 중 하나가 작동하지 않았다 ...하지만이 시간에도 크롬이 제대로 배경을 표시하지 않았다 마음에 오는

우선 코드의 라인

그래서 ... 도대체 지금 ...

... ...

흠 ...

을해야 할 일

... ... ... ...

오! 네! 알았다! 나는 아무도 사용하지 않는 것을 사용합니다. 그것은 무엇을 다시 부르는 ... 오, 그래, 디버깅. 내가 F12가 콘솔에서 무엇을 볼 수 있다는 poped

console.log(document.getElementById('MyClassElement').style.background); 

바로 $('body').append(MyClassElement); 라인 후 :

는

그래서 내가 삽입 반환 document.getElementById('MyClassElement').style.background을 확인할 수 있습니다

(an empty string) 

.. .

이제 나는 지혜가 부족하다. 빨리.

나보다 현명한 사람이 있습니까? 누가 잘못했는지, 어떻게 이것을 달성 할 수 있는지 말해 줄 수있는 사람이 있습니까?

내가 찾고 있어요 무엇

왜 그냥 크롬에서 잘 아닌 다른 브라우저에서 JQuery와 부품 일을 했습니까? 왜 모든 브라우저에서 javascript가 실패 했습니까?

바이올린 : jsfiddle.net/7h2Lsxmx/3/

P.S. 또한 .MyClass의 CSS 속성은 Javascript DOM 요소의 .style 속성 중 하나도 변경하지 않는 것으로 보입니다. JQuery와 동일한 요소는 .css()이 아닙니다.

편집 : 여기

좀 더 설명입니다.

5 개의 CSS 파일이 있습니다.

dark.css, light.css, gray.css, blueish.css, kindOfGreen.css

그들은 모두 같은 클래스의 그들의 있지만, 각 속성에 대해 서로 다른 값을 가지고있다.

.MyClass 
{ 
    background-color:black; 
    color:gray; 
} 

및 Blueish.css는 다음과 같을 수 있습니다 :

그래서 dark.css 일 수 있습니다

.MyClass 
{ 
    background-color:(Put rgb for dark blue here); 
    color:blue; 
} 

그래서 내가 런타임에서 다른 CSS 파일 만 포함 할 수 있습니다 내 페이지의 색상을 변경 PHP를 사용합니다. 이제 너희들은 내가 어디로 갈지 알아야한다.

1이 모든 동적이기 때문에 사용자 적절한 CSS 파일과 쿠키 2 페이지 새로 고침의 테마의 테마 2 스토어 선택을 선택

나는 (@Matthias 나는하지 않을 것이다) 갈 수 없어 적어도 5 개의 CSS 파일 각각에서 값을 변경하는 각 속성에 대한 클래스를 하드 코딩하면 적어도 모질라와 IE에서 코드가 작동하도록 만들 수 있습니다. 클래스를 변경할 수 없습니다. 다른 요소에서도 사용되기 때문에 클래스를 변경할 수 없습니다.

Answer 1

style는 당신이 요소의 인라인 스타일에 액세스 할 수 있습니다. 모든 스타일 속성에 액세스하려면 getComputedStyles을 사용하십시오. More details and examples here.

Answer 2

하나의 요소에 여러 클래스를 적용 할 수 있다는 것을 알고 계십니까? 그냥 공간을 사용하여 그들을 분리하십시오. 그런 다음 선택기를 나눌 수 있습니다.

그렇지 않으면 "div.MyClass"지정된 클래스로 div을 대상으로하는 것과 같이 항상 다른 선택기를 작성할 수 있습니다.

JavaScript를 사용하면 이것이 내 생각에 최선의 방법이 아닌 것처럼 보입니다.

Answer 3

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

.blue-text-color { 
    color: blue; 
} 

<div class="red-background">This div has a red background</div> 

<div class="blue-text-color">This div has blue text color</div> 

<div class="red-background blue-text-color">This div has a red background AND blue text color</div> 

왜 이것이 질문인지 잘 모르겠습니다.

Answer 4

어떤 경우에는 더 많은 CSS 클래스를 추가 할 수 없는지 궁금합니다.

어쨌든 '중요한'추신을 추가하는 CSS를 재정의하십시오.

jQuery를 :

$("#MyClass").css('color','black','important'); 

jsFiddle : http://jsfiddle.net/7h2Lsxmx/1/