アクセススタイルの背景色

Question

Good Morning in my timezone。

選択したオプションと同じ背景色のタグの背景色を設定します。

コードスニペット：

<style> 
    .levelKri1 { 
    background-color:#CCFFCC; 
    } 
    .levelKri2 { 
    background-color:#CCFFFF; 
    } 
</style> 

<select name="matrix" id="matrix" style="visibility: visible;" onChange="alert(this.options[this.selectedIndex].style.backgroundColor)"> 
     <option style="background-color:blue;" selected="selected" value="1">&nbsp;&nbsp;&nbsp;1&nbsp;&nbsp;&nbsp;</option> 
     <option class="levelKri2" value="2">&nbsp;&nbsp;&nbsp;2&nbsp;&nbsp;&nbsp;</option> 
</select> 

を私は最初のものを選択した場合、私は2つ目の背景色は、アラートのCSSクラスで定義されているものを選択した場合、アラート機能は、backgroundColorの を印刷します何も印刷しません

どのようにして、CSSクラスで設定された背景色を取得できますか？

インターナショナルエクスプローラは、ブラウザです。事前に

おかげ 敬具

Answer 1

あなたはselectタグののonchangeイベントハンドラにwindow.getComputedStyle(element)を試すことができます。詳細：https://developer.mozilla.org/en/docs/Web/API/Window/getComputedStyle

Answer 2

これは、RGBの色ですが、これは

var element = document.getElementById('matrix'); 
 
element.addEventListener("change", function() { 
 
    console.log(window.getComputedStyle(element.options[element.selectedIndex]).backgroundColor); 
 
});

.levelKri1 { 
 
    background-color:#CCFFCC; 
 
} 
 
.levelKri2 { 
 
    background-color:#CCFFFF; 
 
}

<select name="matrix" id="matrix" style="visibility: visible;"> 
 
     <option style="background-color:blue;" selected="selected" value="1">&nbsp;&nbsp;&nbsp;1&nbsp;&nbsp;&nbsp;</option> 
 
     <option class="levelKri2" value="2">&nbsp;&nbsp;&nbsp;2&nbsp;&nbsp;&nbsp;</option> 
 
</select>

Answer 3

$("#matrix").change(function() { 
 
    var _color = $(this).children('option:selected').css('backgroundColor'); 
 
    $('#matrix').css('background-color', _color); 
 
});

.levelKri1 { 
 
background-color: #CCFFCC; 
 
} 
 
.levelKri2 { 
 
background-color: #CCFFFF; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select name="matrix" id="matrix"> 
 
    <option selected="selected">Choose an option</option> 
 
    <option class="levelKri1" value="1">Option 1</option> 
 
    <option class="levelKri2" value="2">Option 2</option> 
 
</select>