訪問風格背景顏色

Question

早上好我的時區。

我想用所選選項的背景顏色設置標籤的背景顏色。

代碼片斷：

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

如果選擇第一個，報警功能打印的backgroundColor 如果選擇第二個，其中，所述背景色上的CSS類的警報定義的一個不打印任何東西

我怎樣才能獲得通過CSS類設置的背景顏色？

Interner Explorer是瀏覽器。

預先感謝 問候

Answer 1

您可以在選擇標籤的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>