15

現在、指定されたオブジェクトの実際の背景色を取得したいと思います。ここで、実際とは、たとえば次のコードが与えられた場合に、人々が見るものを意味します。

<div id="foo" style="background-color: red">
    I am red
    <span id="bar">
         I have no background, but I am red
    </span>
</div>

の実際の背景色はである#bar必要がありますrbg(255,0,0)。

これが私がこれまでに持っているものです：

function color_visible(color_str) {
  return color_str && !(color_str.substr(0, 4) == "rgba" && color_str.substr(-2, 2) == "0)");
}

function get_bgcolor (obj) {
  var ret = $(obj).css("background-color");
  if (!color_visible(ret)) ret = $(obj).css("bgcolor");
  if (color_visible(ret)) return ret;
  if (!$(obj).is("body")) return get_bgcolor($(obj).parent());
  return "rgb(255, 255, 255)";
}

しかし、それを行うためのより良い方法はありますか？

StackSnippetとjsFiddleのデモ

function color_visible(color_str) {
  return color_str && !(color_str.substr(0, 4) == "rgba" && color_str.substr(-2, 2) == "0)");
}

function get_bgcolor (obj) {
  var ret = $(obj).css("background-color");
  if (!color_visible(ret)) ret = $(obj).css("bgcolor");
  if (color_visible(ret)) return ret;
  if (!$(obj).is("body")) return get_bgcolor($(obj).parent());
  return "rgb(255, 255, 255)";
}

console.log(get_bgcolor($("#bar")));
console.log(get_bgcolor($("#baz")));
console.log(get_bgcolor($("#foo")));
console.log(get_bgcolor($("body")));
body {
  background-color: yellow;
}

.bg_white {
  background-color: #FFF;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div id="foo" style="background-color: red">
    I am red
    <span id="bar">
      I have no background
    </span>

    <span id="baz" class="bg_white">
      I am white
    </span>
  </div>
  I am yellow
</div>

4

5 に答える 5

17

Javascriptのみのバージョン：

function realBackgroundColor(elem) {
    var transparent = 'rgba(0, 0, 0, 0)';
    var transparentIE11 = 'transparent';
    if (!elem) return transparent;

    var bg = getComputedStyle(elem).backgroundColor;
    if (bg === transparent || bg === transparentIE11) {
        return realBackgroundColor(elem.parentElement);
    } else {
        return bg;
    }
}
realBackgroundColor(document.querySelector('#element')); // rgb(255, 255, 255)

http://jsfiddle.net/qnLwsr7y/

不透明度や背景画像は考慮されていないことに注意してください。

于 2017-01-15T17:05:34.557 に答える
7

これを試して：

var get_bgcolor = function(obj) {
    var real = obj.css('background-color');
    var none = 'rgba(0, 0, 0, 0)';
    if (real === none) {
        return obj.parents().filter(function() {
            return $(this).css('background-color') != none
        }).first().css('background-color');
    } else {
        return real
    }
}

http://jsfiddle.net/bqkwN/

于 2012-09-25T04:14:54.123 に答える
6

試してみてくださいwindow.getComputedStyle：

window.getComputedStyle(element, null).getPropertyValue("background-color")

このアプローチはシンプルでネイティブですが、IE8をサポートしていません

于 2013-05-16T15:21:18.357 に答える
3

これを正しく理解するのは難しいことです:(そして、すべての場合で100％正しい結果は不可能だと思います。

background-colorは継承されません。getComputedStyleは、elem.style.backgroundColorにあるものだけを返します。そうでない場合は、ロードされたcssスタイルシートから派生したものを返します。それでもこれら2つが値を返さない場合は、値が返さrgba(0, 0, 0, 0)れます。その場合は、DOMを上って、親要素が何を持っているかを確認する必要があります。また、フレームの場合、背後の（つまり上部の）フレームから背景を取得できるため、これはさらに複雑になります。

これが試みです：

const getCbgcolor = (elem) => {
  if (!getCbgcolor.top) getCbgcolor.top= (() => { 
    try { return window.top.document.documentElement; } catch(e) { return null; /* CORS */}})()
  });

  while (true) {
    let cbg=window.getComputedStyle(elem).getPropertyValue('background-color');
    if (cbg && cbg!='rgba(0, 0, 0, 0)' && cbg!='transparent') return cbg;
    if (elem===getCbgcolor.top) return 'initial';
    elem = elem.parentElement;
    if (!elem) return '';
  }
}

（これに関する問題は、誰かが要素の背景をrgba(0, 0, 0, 0)要素のスタイルまたはcssスタイルシートに明示的に設定した場合、このコードでは機能しない計算値の代わりにその値が必要になる可能性があることです。）

于 2017-09-07T22:10:43.603 に答える
-1

これを試して：

function hexc(colorval) {
    var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    delete(parts[0]);
    for (var i = 1; i <= 3; ++i) {
        parts[i] = parseInt(parts[i]).toString(16);
        if (parts[i].length == 1) parts[i] = '0' + parts[i];
    }
    color = '#' + parts.join('');
}

var color = '';
$('div#foo').click(function() {
    var x = $(this).css('backgroundColor');
    hexc(x);
    alert(color);
})
于 2012-09-25T04:18:15.333 に答える