Setting the color of text to a parent Div's background color

Question

I'm working on a little project where I have multiple multicolored items, and tags within them. Instead of specifying my color for both text and background, I'd like to just get the background color of my parent div and assign it to the color of my text.

My current jQuery looks like this:

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

My HTML is

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

As you can see from my jQuery, I created an alert that will show me the value of the variable "tagcolor", and weirdly it seems to be getting all other unwanted CSS values, even though I specified "Background". I can't figure out what I'm doing wrong, how can I fix this?

EDIT: Did some reseach here;

What is the difference between background and background-color

Apparantly "background" returns a bunch of different stuff.

Wow! Look at all those answers! It's like feeding pigeons in the park. — Yehuda Shapira, Feb 16 '14 at 15:08

score 1 · Answer 1 · answered Feb 16 '14 at 15:13

You can use "background" property to apply a bunch of values regarding the background such as:

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

It's much shorter than:

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

When you retrieve the 'background' property, you get all of the values (default if not specified). Instead just query for the css "background-color" property.

Pranav C Balan · Answer 2 · 2014-02-16T15:11:43.337

0

You need to use background-color instead of background

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

Fiddle Demo

Retrieval of shorthand CSS properties (e.g., margin, background, border), although functional with some browsers, is not guaranteed. (Taken from : http://api.jquery.com/css/)

edited Feb 16 '14 at 15:11

answered Feb 16 '14 at 14:58

Pranav C Balan

113,687
23
165
188

score 0 · Accepted Answer · answered Feb 16 '14 at 14:58

0

Fiddle Demo

use background-color instead of background

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

see all properties of background

.css('background-color') return all background properties that are set by ur css and browser

answered Feb 16 '14 at 14:58

Tushar Gupta - curioustushar

58,085
24
103
107

why down-voted ?? did i miss something ?? down-voter pls comment . – Tushar Gupta - curioustushar Feb 16 '14 at 15:05
1

No idea why someone would downvote. I upvoted since you're the only person to actually include why this works. I'll select as best answer when it opens up. – Alexander Lozada Feb 16 '14 at 15:07

score 0 · Answer 4 · answered Feb 16 '14 at 14:58

Use background-color instead and it will work.

$(".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>

score 0 · Answer 5 · answered Feb 16 '14 at 14:59

0

try this please:

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

answered Feb 16 '14 at 14:59

Popo

2,402
5
33
55

1

background is a kinda compound css style, as backgroundColor is the specific attribute for the color – Popo Feb 16 '14 at 15:01
1

@AlexanderLozada `background` is a shorthand method that sets different properties, one of which is `background-color`. Therefore you can't set the value of `color` to the value of `background`. – Mr Lister Feb 16 '14 at 15:01

score 0 · Answer 6 · answered Feb 16 '14 at 15:00

background contains a lot more than just the color!

Try specifying background-color:

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

DEMO

score 0 · Answer 7 · answered Feb 16 '14 at 15:00

0

Try this

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

Demo

answered Feb 16 '14 at 15:00

Rakesh Kumar

2,705
1
19
33

score 0 · Answer 8 · answered Feb 16 '14 at 15:00

0

Try to use background-color instead of background

answered Feb 16 '14 at 15:00

dongseok0

737
2
7
18

Setting the color of text to a parent Div's background color

8 Answers8