Menu
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>
521
Background properties do not inherit, but the parent element's background will shine through by default because of the initial 'transparent' value on 'background-color'.
With Hexadecimal values, you can set a background color for a div or any other element with a total of 6 characters.
The HTML bgcolor attribute is used to set the background color of an HTML element. Bgcolor is one of those attributes that has become deprecated with the implementation of Cascading Style Sheets (see CSS Backgrounds). Attribute Values: color_name: It sets the background color by using the color name.
The default background color of a div is transparent . So if you do not specify the background-color of a div, it will display that of its parent element.
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.
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;
nobody knows..
198
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.
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
