Best IT Recipes

How can I determine if a particular CSS property is inherited using jQuery?

This is a very simple question, so I will keep it updated:

How do I know if any CSS property is inherited from a DOM element?

The reason I'm asking is because using the jQuery css method, it will return a computed style that inherits the CSS properties of the parent object. Is there a way to get the properties set on the object itself?

An example might explain that I am getting a little better:

CSS

 div#container { color:#fff; }

HTML:

 <div id="container"> Something that should be interesting <div class="black"> Some other thing that should be interesting </div> </div>

So in the case of a div.black that inherits color , how can I tell if it inherits?

$('div.black:eq(0)').css('color') will obviously give me #fff , but I want to get the style of the element itself, not its parents.

+25
javascript jquery css
Feb 15 '11 at 5:13
source share
7 answers

To actually determine if the css style has been inherited or installed on the element itself, you will need to implement the exact rules that browsers apply to determine the value used for a particular style for the element.

You will need to implement this specification , which defines how calculated and used values ​​are calculated.

CSS selectors may not always follow parent-child relationships, which may have simplified issues. Consider this CSS.

 body { color: red; } div + div { color: red; }

and the following HTML:

 <body> <div>first</div> <div>second</div> </body>

Both first and second wil are displayed in red, however, the first div is red because it inherits from the parent. The second div is red because the CSS div + div rule is applied to it, more specifically. Looking at the parent, we will see that it has the same color, but this is not where the second div gets it.

Browsers do not expose any internal calculations except the getComputedStyle interface.

A simple but erroneous solution would be to execute each selector from the style sheets and check if the given element satisfies the selector. If so, suppose the style was applied directly to the element. Say you wanted to go through each style in the first stylesheet,

 var myElement = $('..'); var rules = document.styleSheets[0].cssRules; for(var i = 0; i < rules.length; i++) { if (myElement.is(rules[i].selectorText)) { console.log('style was directly applied to the element'); } }
+9
Feb 15 '11 at 6:24
source share

I don’t think that you can tell whether a given style is inherited, I think that the best way is to set the given CSS property for “inheritance”, capture its calculated value and compare it with the original value. If they are different, the style is definitely not inherited.

 var el = $('div.black:eq(0)'); var prop = el.css("color"); el.css("color", "inherit"); var prop2 = el.css("color"); el.css("color", prop); if(prop != prop2) alert("Color is not inherited.");

Demo on jsFiddle

The point is: if you set div.black to #fff in CSS or through the inline style, this method will assume that it is inherited. Not perfect, in my opinion, but it can satisfy your needs. I'm afraid that the perfect solution requires going around the whole stylesheet.

+5
Feb 15 '11 at 6:07
source share

http://jsfiddle.net/k7Dw6/

 var $black = $('div.black:eq(0)'); alert($('<div>').attr('class', $black.attr('class')).css('line-height') === $black.css('line-height'));

You can create a new element with the same class (and, I think, ID), and check if the CSS property is the same or not.

+2
Feb 15 '11 at 6:05
source share

I know this is an old question, however I thought I would share what I did with Josh's answer, namely: modified it to remove css if it was inherited, and turned it into a jQuery plugin. Please feel free to take it off, but for now it works for me :-)

 $.fn.isInheritedStyle = function(style) { var current = this.css(style); this.css(style, 'inherit'); var inherited = this.css(style); if (current == inherited) this.css(style, ''); else this.css(style, current); return (current == inherited); }
+2
Oct 31 '14 at 3:22
source share

If you are wondering how the style differs from the parent element, you can look at the css value that was provided to the parent element by specifying $ ('div.black:eq(0)'). parent () .css ('row height'). This way you can determine if the child and the parent have the same value. However, what you can learn from this is limited. It is possible that both the child and the parent were clearly assigned the same thing!

If you are interested in a much more complex cascade structure (for example, as you can see in firebug), then I do not have a good answer for you that uses only jQuery. There will be some kind of ineffective hack that you can perform depending on the specific information you want (for example, cloning an object, as suggested by others, or switching classes and checking the effect of the switch), but it makes me upset just thinking about it !

As I think someone noticed vanilla JS allows you to check the properties of specific style elements; so maybe a hybrid of jQuery and vanilla JS will give you what you need?

Check out http://developer.apple.com/internet/webcontent/styles.html to see javascript that gives you access to style information. AFAIK it will not be "out of the box for free" type of things from jQuery (maybe everything is wrong). However, this should be possible if you want to iterate over style sheet information.

Edit: Removed some things based on the source code of the question code

+1
Feb 15 2018-11-11T00:
source share

The JS element.style property (not jQuery) returns a CSSStyleDeclaration object, thus:

 {parentRule: null, length: 0, cssText: "", alignContent: "", alignItems: ""…

If the style you are interested in matters, then it declares (or applies JS) at the element level, otherwise it is inherited.
Info retrieved from https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

I struggled with HTML5 Dnd by adding display: list-item at the item level (li) and breaking up another hide / show filter functionality; I was able to fix it.
My special code is:

 // browser bug? it adds display:list-item to the moved elements, this // loops clear the explicit element-level "display" style var cols = $('#columnNames li'); for( var icol = 0; icol < cols.length; icol++) { var d = cols[icol].style; // the CSSStyleDeclaration d.display = ""; // clear the element-level style }
+1
Mar 10 '15 at 19:44
source share

I think this is a nice jquery behavior. What do you want to get when $('div.black:eq(0)').css('line-height') , false or undefined? This is so confusing because the real line-height value (inherited, yes) is 1 em.

-3
Feb 15 2018-11-11T00:
source share


More articles:


All Articles