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>

如果我选择第一个，则Alert功能会打印backgroundColor 如果我选择第二个，在css类中定义背景颜色的那个警报不会打印任何内容

如何获得通过css类设置的背景颜色？

Interner Explorer是浏览器。

提前致谢最好的问候

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

访问风格背景颜色

3 个答案: