Question

我正在开展一个小项目，我有多个多彩项目和标签。我没有为文本和背景指定颜色，而是想获得父div的背景颜色并将其指定为文本颜色。

我目前的jQuery看起来像这样：

$(".infobox").each(function() {
     var tagcolor =    $(this).closest('.info').css('background');
     $(this).css('color',tagcolor);
     alert(tagcolor);
});

我的HTML

<div class="info" style="background: #408FCE;">
    <div class="infobox">
        tags
    </div>
</div>

正如你从我的jQuery中看到的，我创建了一个警告，它将向我显示变量“tagcolor”的值，奇怪的是它似乎获得了所有其他不需要的CSS值，即使我指定了“背景”。我无法弄清楚我做错了什么，我该如何解决这个问题？

编辑：这里做了一些研究;

What is the difference between background and background-color

显然“背景”会返回一堆不同的东西。

Answer 1

您可以使用“background”属性应用一系列有关背景的值，例如：

background: #123456 url('http://www.path.to.your.image.com') left top no-repeat;

它比以下短得多：

background-color:#123456;
background-image:'http://www.path.to.your.image.com';
background-position:left top;
background-repeat:no-repeat;

当您检索“background”属性时，您将获得所有值（如果未指定，则为默认值）。而只是查询css“background-color”属性。

Answer 2

您需要使用background-color代替background

$(".infobox").each(function() {
     var tagcolor =    $(this).closest('.info').css('background-color');
     $(this).css('color',tagcolor);
     alert(tagcolor);
});

Fiddle Demo

检索速记CSS属性（例如，边距，背景，边框）虽然功能有些浏览器，但不能保证。（摘自：http://api.jquery.com/css/）

Answer 3

Fiddle Demo

使用background-color代替background

var tagcolor = $(this).closest('.info').css('background-color');

查看background

的所有属性

.css('background-color')返回由background和css

设置的所有browser属性

Answer 4

使用背景颜色代替，它将起作用。

$(".infobox").each(function() {
     var tagcolor =    $(this).closest('.info').css('background-color');
     $(this).css('color',tagcolor);
     alert(tagcolor);
});

<div class="info" style="background-color: #408FCE;">
    <div class="infobox">
        tags
    </div>
</div>

Answer 5

请试试这个：

$(".infobox").each(function() {
     var tagcolor =    $(this).closest('.info').css('backgroundColor');
     $(this).css('color',tagcolor);
     alert(tagcolor);
});

Answer 6

background包含的不仅仅是颜色！

尝试指定background-color：

$(".infobox").each(function() {
     var tagcolor =    $(this).closest('.info').css('background-color');
     $(this).css('color',tagcolor);
     alert(tagcolor);
});

DEMO

Answer 7

试试这个

$('.infobox').each(function(index, element) {
        $(this).css({
            color : $(this).parent().css('background-color')
        })
    });

<强> Demo

Answer 8

尝试使用背景色而不是背景色

将文本颜色设置为父Div的背景颜色

8 个答案: