CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Travis J
Travis J

Reputation: 82337

Is it possible to see the inherited background color of a div?

Is it possible to see the inherited background color of a div?

How can I get the color that an html element inherits? By default elements are transparent. So, when a div is placed somewhere it will not show up in the render (but if the background color of that div is red it will be immediately visible). If there is no explicit background color, how can I find the implicit one?

Here is some example code. There is a div which is 1px by 1px in the top left of a picture of the Eiffel Tower. What is the background color of that div?

<html>
<body style="margin: 0px;">
<img src="http://www.eiffel-tower.us/Eiffel-Tower-Images/eiffel-tower-landmark-4.jpg">
<div style="position: absolute;top: 0px; left: 0px; width: 1px; height: 1px;z-index:1">
</div>
</body>
</html>

Upvotes: 5

Views: 3204

Answers (5)

ecatmur
ecatmur

Reputation: 157484

What you're really doing here is taking a 1x1 screenshot of part of the webpage. Try this question: https://stackoverflow.com/questions/7618368/how-to-capture-the-screen-using-javascript

The conclusion appears to be that (barring special extensions, plugins etc.) the way to do it is with html2canvas: Using HTML5/Canvas/JavaScript to take screenshots

Upvotes: 2

Filip Ros&#233;en
Filip Ros&#233;en

Reputation: 63892

The method everyone will recommend, which sadly won't work in all cases..

You could traverse up the node-tree using the elements parent-property, checking if there is any element that has an explicit background-color.

The problem with this approach is that elements set to reside outside of their parent (using for example position:relative with the appropriate sibling values) can't be identified.

Any portable and 100% working solution to the problem?

The only portable way I can think of that will always yield the correct result is to find the (x,y) of where your element is in the browser.

Then iterate over all elements to see if any elements (x,y) results in that it's behind the needle-element and then check whether this element has a background-color property or not.

This is guaranteed to work, but will have a very hard impact on performance. If you are sure of the fact that an element isn't going to float itself outside of the bounds of it's true parent use the first method described.

If you'd like this method to work for elements which have an image as background-property you could load the said image onto a canvas and read the value of the pixel you'd like, though that will make the already performance sucking operation even more sucking, but it will work.

Also;

  • what if an element is floating above more than one element?
  • which color should be returned in a function implementing what you are describing?
  • The color shining through in the center of your needle-element, or maybe in the top left corner?

Element floating over 4 different elements, which is the elements background color?

floating div over 4 divs

nobody knows..

Upvotes: 5

Horen
Horen

Reputation: 11382

If the div inherited a background color from a parent element you would actually see it in the div. That's the beauty of cascading style sheets ;-)

So in order to find the implicit background color you have to move up the DOM tree until you find the parent element with a background color set.

This is really easy to do with e.g. Firebug for Firefox or the developer tools for Chrome, etc.

Upvotes: 2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324790

Well, you could try something like this:

window.getComputedStyle = window.getComputedStyle || function(x) {return x.currentStyle;}
function getActualBackgroundColor(elem) {
    while(elem && window.getComputedStyle(elem).backgroundColor == "transparent")
        elem = elem.parentNode;
    return elem ? window.getComputedStyle(elem).backgroundColor : "transparent";
}

However, bear in mind that this will only work reliably for statically-positioned elements (ie. not position: absolute/relative/fixed) that are not floated and whose parents do not have background images.

Upvotes: 4

Daniel Li
Daniel Li

Reputation: 15399

You can recursively define a function that passes a jQuery object which checks for a background property.

function get_inherited_bg(jquery_object) {
    if (jquery_object.css("background") != "rgba(0, 0, 0, 0) none repeat scroll 0% 0%") {
        return jquery_object.css("background");
    }
    return get_inherited_bg(jquery_object.parent());
}

Enjoy and good luck!

Upvotes: 1

Related Questions