在 IE 中获取计算出的背景颜色为 rgb

Question

我试图使用以下代码在 IE 中获取 RGB 背景颜色：

function getStyle(elem, name) {
    // J/S Pro Techniques p136
    if (elem.style[name]) {
        return elem.style[name];
    } else if (elem.currentStyle) {
        return elem.currentStyle[name];
    }
    else if (document.defaultView && document.defaultView.getComputedStyle) {
        name = name.replace(/([A-Z])/g, "-$1");
        name = name.toLowerCase();
        s = document.defaultView.getComputedStyle(elem, "");
        return s && s.getPropertyValue(name);
    } else {
        return null;
    }
}

var $b = $("<button>");
$b.css("backgroundColor", "ButtonFace");
$("body").append($b);
alert("button bg color is: "+ getStyle($b[0],"backgroundColor"));
//alerts 'buttonface'

这不会像 firefox 那样返回 rgb 颜色值，它返回对我来说没用的“buttonface”。

Answer 1

我一直致力于“getStyle”函数的跨浏览器实现，
我的功能尚未完成，但我可以帮助您解决 IE 遇到的具体问题。

对于计算的backgroundColor，我使用了此页面，它使用 IE 特定的 queryCommandValue 方法获取 所选内容的BackColor。

关于您发布的实现，我建议首先检查通过 document.defaultView 的标准 getCompulatedStyle 方法是否存在，因为某些浏览器（如 Opera）提供 IE 特定的 currentStyle 对象以实现兼容性。

因此，我重构了您的函数并包含了 IE hack：

function getStyle(elem, name) {
  if (document.defaultView && document.defaultView.getComputedStyle) {
    name = name.replace(/([A-Z])/g, "-$1");
    name = name.toLowerCase();
    s = document.defaultView.getComputedStyle(elem, "");
    return s && s.getPropertyValue(name);
  } else if (elem.currentStyle) {
    if (/backgroundcolor/i.test(name)) {
      return (function (el) { // get a rgb based color on IE
        var oRG=document.body.createTextRange();
        oRG.moveToElementText(el);
        var iClr=oRG.queryCommandValue("BackColor");
          return "rgb("+(iClr & 0xFF)+","+((iClr & 0xFF00)>>8)+","+
                      ((iClr & 0xFF0000)>>16)+")";
      })(elem);
    }

    return elem.currentStyle[name];
  } else if (elem.style[name]) {
    return elem.style[name];
  } else  {
    return null;
  }
}

希望很快我会发布一个更通用的实现，但这足以解决您的 backgorundColor 问题。

您可以在此处测试上述函数。