Question

我正在尝试在网页中获取标识的背景颜色。我要做的是克隆徽标并将克隆放入另一个应该是正确颜色的div中。

该文件如下：

<div>
    <div class="foo">
        <div id="start">
           Find background for this div
        </div>
    </div>
</div>
<button onclick="on_find_color_clicked()">
    find color
</button>

我试过的是：

function on_find_color_clicked()
{
  var background = get_background_of($('#start'));

  alert("the background is " + background);
}

function get_background_of(element)
{
  var parent = element.parent();
  var value = element.css('background');

  var result;
  if (is_null_or_empty(value))
  {
    result = parent != null
      ? get_background_of(parent) : "";
  }
  else
    result = value;    

  return result;
}

function is_null_or_empty(value)
{
  return value == null || value == '';
}

我收到此错误：

NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMWindow.getComputedStyle]

在

return window.getComputedStyle( elem, null );

http://jsfiddle.net/MCC9L/5/

Answer 1

我希望这会有所帮助

http://jsfiddle.net/MCC9L/27/

function on_find_color_clicked() {
    var background = get_background_of($('#start'));

    alert("the background is " + background);
}

function get_background_of(element) {
    var parent = element.parent();
    var value = element.css('background-color');

    if (value.indexOf("rgba(0, 0, 0, 0)") != -1) {
        value = get_background_of(parent);
    }

    return value;
}

Answer 2

您需要使用.css("background-color")代替.css("background")

Answer 3

如果您想要颜色，而不是整个background属性，请将var value = element.css('background');更改为var value = element.css('backgroundColor')

但更大的问题是function is_null_or_empty(value) { return value == null || value == ''; }应为function is_null_or_empty(value) { return value == null || value == '' || value==='rgba(0, 0, 0, 0)' || value==='transparent'; }，因为空backgroundColor可以返回rgba(0, 0, 0, 0)或transparent。否则不会被触发。

类似

function on_find_color_clicked() {
    var background = get_background_of($('#start'));
    alert("the background is " + background);
}

function get_background_of(element) {
    var parent = element.parent();
    var value = element.css('backgroundColor');
    var result;
    if (is_null_or_empty(value)) {
        result = parent && parent != null ? get_background_of(parent) : "";
    } else { result = value; }
    return result;
}

function is_null_or_empty(value) {
    return value == null || value == '' || value==='rgba(0, 0, 0, 0)' || value==='transparent';
}

做了一个小提琴：http://jsfiddle.net/filever10/USNaZ/

递归获取元素的背景颜色失败

3 个答案: