访问样式背景颜色答案

【问题标题】：Access style background color访问样式背景颜色
【发布时间】：2017-04-06 07:50:57
【问题描述】：

在我的时区早上好。

我想将标签的背景颜色设置为与所选选项的背景颜色相同。

代码 sn-p：

<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 类设置的背景颜色？

Inner Explorer 是浏览器。

提前致谢最好的问候

【问题讨论】：

标签： javascript html css css-selectors background-color

【解决方案1】：

您可以在选择标记的 onchange 事件处理程序上尝试window.getComputedStyle(element)。更多信息在这里：https://developer.mozilla.org/en/docs/Web/API/Window/getComputedStyle

【讨论】：

【解决方案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>

【讨论】：

它适用于 Chrome，但 IE 是客户端使用的浏览器，它总是检索 RGB(0,0,0)
我通过 className 属性解决方法，我从所选选项中读取 className，然后将其设置为 select 元素

【解决方案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>

【讨论】：