CSSの親要素

Question

div要素の親cssプロパティに基づいてCSSスタイルを動的に適用したい。これを行うにはjavascriptで/これが可能ですか？コードの例：

<div clas="parent"> 
    <div class="child"> 
      <div class="x"></div> 
    </div> 
</div> 

親クラスのCSSプロパティに基づいて、私はクラスのCSSプロパティを切り替えたいのx

Answer 1

まず、あなたはquerySelectorを使用して要素をつかむ、あなたはclassNameを使用してクラスを変更することができます。あなたの例では

は、赤に色を変更するには、あなたは何ができる：

document.querySelector('.parent .child div').className = "x" 

は、クラスを切り替えるには、あなたがclassList.toggle("x")

document.querySelector('.parent .child div').classList.toggle("x")` 

Answer 2

var y = document.getElementById('child').parentNode.className; 
if (y=="active") { 
document.getElementById('x').style.background = '#ff0000'; 
} 

デモ使用することができますhttp://codepen.io/simsketch/pen/vgNjdp

希望これを助けて！

Answer 3

JavaScriptを使用して、親クラスに基づいて何かを切り替える必要がありますか。あなたは純粋なCSSでそれを行うことができます。

.parent .child .x { 
    background-color: red; /* default */ 
} 


.parent.someClass .child .x { 
    background-color: yellow; /* overrides the default with specificity */ 
} 

Answer 4

あなたがjQueryへのアクセス権を持っている場合、あなたはそのような非常に特定のセレクタでそれをacheiveすることができます。

$('.x').each(function() { 
 
    if ($(this).closest($('.parent')).hasClass('makeBlue')) { 
 
    $(this).addClass('turnBlue'); 
 
    } 
 
    if ($(this).closest($('.parent')).hasClass('makeRed')) { 
 
    $(this).addClass('turnRed'); 
 
    } 
 
});

.x.turnBlue { 
 
    background-color: blue; 
 
    width: 250px; 
 
    height: 250px; 
 
} 
 
.x.turnRed { 
 
    background-color: red; 
 
    width: 250px; 
 
    height: 250px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="parent makeBlue"> 
 
    <div class="child"> 
 
    <div class="x"></div> 
 
    </div> 
 
</div> 
 
<div class="parent makeRed"> 
 
    <div class="child"> 
 
    <div class="x"></div> 
 
    </div> 
 
</div>