CSS는 다른 요소에 따라 색상을 설정합니다.

Question

예를 들어, 내 페이지에 여러 개의 html 요소가 있습니다. 아래의 이미지를 참조 -이 sections에 대한

<section id="top-bar"> 
    <!-- html content --> 
</section> 

<section id="header"> 
    <!-- html content --> 
</section> 

<div id="left"> 
    <!-- html content --> 
</div> 

<section id="footer"> 
    <!-- html content --> 
</section> 

CSS의 background-colour 및 text-colour이 줌라 3.x를 템플릿 설정에서 설정이 내 '브랜드 컬러'입니다.

나는 등

이

내 문제가 있다는 것입니다 Preset 2 다음 preset2.css 종료 웹 사이트 전면에로드를 선택하면 내가 다음 preset1.css 웹 사이트의 프론트 엔드에 들어있는 템플릿 설정에 Preset 1 선택하는 경우 페이지에 다른 사용자 정의 요소이 있습니다 (위의 코드에서 예 : <div id="left">). 이러한 요소에 대한 배경색과 텍스트 색상은 템플릿 설정을 통해 설정되거나 제어되지 않고 대신 custom.css 파일에서 수동으로 설정해야합니다. 그러나이를 변경해야 할 때마다 custom.css 파일을 변경해야합니다. 브랜드 색 '.

기본적으로 사용자 정의 요소에 템플릿 구성에서 지정한 것과 동일한 '브랜드 색'을 사용하고 싶습니다. 언제든지 custom.css 파일을 바꾸지 않아도됩니까?

그래서, <div id="left">background-colour 및 text-colour는 <section id="top-bar">background-colour 및 text-colour 일치해야합니다.

JavaScript 등을 사용하여 CSS를 동적으로 설정할 수 있습니까?

감사

Answer 1

당신은 그것의 형제 자매를 #top_bar 요소의 배경 색상을 얻을이 경우 당신이 원하는 다른 요소에 배경으로 그 색상을 추가 JS를 사용할 수 있습니다. 텍스트 색상과 동일합니다.

var top_bar = $('#top-bar') 
 
var bg = top_bar.css('background-color') 
 
var color = top_bar.css('color') 
 

 
top_bar.siblings().css({ 
 
    backgroundColor: bg, 
 
    color: color 
 
})

section, div { 
 
    width: 50px; 
 
    height: 50px; 
 
    display: inline-block; 
 
} 
 
#top-bar { 
 
    background: #22B8F0; 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="top-bar"> 
 
    Text 
 
</section> 
 
<section id="header"> 
 
Text 
 
</section> 
 
<div id="left"> 
 
    Text 
 
</div> 
 
<section id="footer"> 
 
    Text 
 
</section>

Answer 2

.preset1이 그리고 유일한을 #left처럼, 같은 PRESET1 등, 그 자녀 등의 각 요소를 선택할 때, body 요소와 같은 부모 요소에 클래스를 추가 변경해야하는 것은 하나의 클래스이며 재 동기화의 걱정은 없습니다.