How can I tell if a particular CSS property is inherited with jQuery?
This is a very simple question, so I'll keep it really brief:
How can I tell if a particular DOM element's CSS property is inherited?
Reason why I'm asking is because with jQuery's css method it will return the computed style, which inherits the parent object's CSS properties. Is there a way t开发者_如何学Goo retrieve the properties set on the object itself?
An example might explain what I'm getting at a bit 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 instance of div.black, which inherits color, how can I tell if it is inherited?
$('div.black:eq(0)').css('color') will obviously give me #fff, but I want to retrieve the style of the element itself, not its parents.
To actually determine whether a css style was inherited or set on the element itself, you would have to implement the exact rules that the browsers apply to determine the used value for a particular style on an element.
You would have to implement this spec that specifies how the computed and used values are calculated.
CSS selectors may not always follow a parent-child relationship which could have simplified matters. 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 show up in red, however, the first div is red because it inherits it from the parent. The second div is red because the div + div CSS rule applies to it, which is more specific. Looking at the parent, we would see it has the same color, but that's not where the second div is getting it from.
Browsers don't expose any of the internal calculations, except the getComputedStyle interface.
A simple, but flawed solution would be to run through each selector from the stylesheets, and check if a given element satisfies the selector. If yes, then assume that style was applied directly on 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');
}
}
I don't think you can tell if the given style is inherited, I think the best you can do is to set the given CSS property to "inherit", capture its computed value, and compare it to 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 this: If you set div.black to #fff in the CSS or via inline style, this method will consider that to be inherited. Not ideal, in my opinion, but it may suit your needs. I'm afraid a perfect solution requires traversal of the entire stylesheet.
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 could create a new element with the same class (and ID I guess) and check if the CSS property is the same or not.
I know this is an old question, however I thought I'd share what I've done with Josh's answer, viz: modified it to remove the css if it was inherited, and turned it into a jQuery plugin. Please feel free to shoot it down, but so far it is working 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);
}
The JS (not jQuery) element.style property returns a CSSStyleDeclaration object thus:
{parentRule: null,
length: 0,
cssText: "",
alignContent: "",
alignItems: ""…
If the style you are interested in has a value then it's declared (or applied by JS) at the element level, else is inherited.
The information came from https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
I was struggling with HTML5 Dnd adding display:list-item at the element level (li) and breaking another hide/show filter functionality; I was able to fix it this way.
My specific code was:
// 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
}
If you're interested in how the style is different from a parent element you could look at the css value which has been given to the parent by saying $('div.black:eq(0)').parent().css('line-height'). In this way you could tell if the child and the parent had the same value. What you can glean from this, however, is limited. It is possible that both the child and the parent have been explicitly assigned the same thing!
If you're interested in the far-more-complex structure of the cascade (e.g. like what you can see in firebug) then I don't have a good answer for you that uses only jQuery. There will be some inefficient hack you can perform depending on the specific information you want (like cloning the object as others suggested, or toggling classes and checking the effect of the toggle), but it makes me upset just thinking about it!
As I think someone noted, vanilla JS does allow you to inspect the properties of specific style items; so maybe a hybrid of jQuery and vanilla JS will get you what you need?
Check out http://developer.apple.com/internet/webcontent/styles.html to see the javascript which gives you access to stylesheet information. AFAIK this isn't going to be an "out of the box for free" type of thing from jQuery (could totally be wrong). That said, it should be possible if you are willing to iterate through the stylesheet information.
Edit: Removed some stuff based on the original question's example code
I think, it's nice behavior of jquery. What do you want to get when $('div.black:eq(0)').css('line-height'), false, or undefined? This is so confusing, because real value of line-height (inherited, yes) is 1 em.
加载中,请稍侯......
精彩评论