1

How would I check if a style is defined on an element? Or how do I check if the style value is inherited or not?

I have a div that sometimes may be inheriting a style value. I want to know if the style value is inherited.

var element = document.getElementById("a");
var property = "--my-style";
var value = element.style.getPropertyValue(property);
var computedValue = window.getComputedStyle(element).getPropertyValue(property);


console.log("A value:" + value);
console.log("A computed value:" + computedValue);

element = document.getElementById("b");

value = element.style.getPropertyValue(property);
computedValue = window.getComputedStyle(element).getPropertyValue(property);

console.log("B value:" + value);
console.log("B computed value:" + computedValue);
#a {
    --my-style: A;
}

#b {
    
}
<div id="a">

   <div id="b">
       Hello World
   </div>
</div>

Does the code above work?

1.21 gigawatts
  • 16,517
  • 32
  • 123
  • 231
  • 1
    Does this answer your question? [How can I tell if a particular CSS property is inherited with jQuery?](https://stackoverflow.com/questions/5000108/how-can-i-tell-if-a-particular-css-property-is-inherited-with-jquery) – SMAKSS Jul 03 '20 at 04:57
  • You can very easily tell if a style is manually defined on an `HTMLElement` with `HTMLElement.style[property]`, but when you bring CSS into the equation, it gets messy. Your only option will be to iterate over all the `style` elements on the page and then run regex on every `style.sheet.cssRules[i].selectorText` as provided in the post linked by @SMAKSS. – Lewis Jul 03 '20 at 05:00
  • It's close but I'm not using JQuery. I saw that answer on the linked post. I don't see that as an answer to "is property x value inherited" – 1.21 gigawatts Jul 03 '20 at 05:02
  • Honestly, this approach is ridiculously inefficient and you should abandon it entirely. What I listed was vanilla JS as well, no jQuery. – Lewis Jul 03 '20 at 05:02
  • It seems the answer is, "No. There is no way to tell if a style is inherited." EXCEPT all the web developer tools are able to show the complete inherited cascading style values and declarations in order. If there is no way to do this in JavaScript it seems like an important missing feature. – 1.21 gigawatts Jul 03 '20 at 05:12
  • @1.21gigawatts I understand your frustration, but CSS styling and Javascript are generally compartmentalized for efficiency. You CAN, if you REALLY needed to, do this in the method I mentioned, iterate over every single `styleElement.sheet.cssRules[i].selectorText` and see if your given element is in `document.querySelectorAll(selectorText)`, but for the reasons mentioned in that other SO post, it's pretty much impossible (and completely reinventing the wheel) to tell if a CSS rule applies *directly* to an element or indirectly through a parent. – Lewis Jul 03 '20 at 05:25
  • If you give some more background on what you're trying to solve with this approach, I can maybe recommend an alternative route. – Lewis Jul 03 '20 at 05:27
  • @Christian I'm trying to solve this exact issue and nothing else. – 1.21 gigawatts Jul 03 '20 at 07:10
  • Afaik, there's no good use case for easily determining the source of a current CSS style outside of debugging. Given that and the expense of tracking that data, it's not surprising that the capability is limited to the browser's dev environment. If you think otherwise, it's more likely that it's actually that the larger problem needs to be restructured such that this capability is no longer required. – Ouroborus Jul 03 '20 at 08:59
  • Might be able to extend the solutions to [this question](https://stackoverflow.com/questions/2952667/find-all-css-rules-that-apply-to-an-element) to create this capability. – Ouroborus Jul 03 '20 at 09:07
  • @Ouroborus I've seen that post before in the past as there is an upvote. It's sort of helpful. But the reason you want to get if a style is applied or inherited makes more sense when you have custom CSS properties. Let's say you have a component or div that has a feature for draggable and you use CSS to store that value like so, `--is-draggable: true`. If there are more options like this and this HTML element is part of larger groups then you want to know if they are defined, or if they are inherited. – 1.21 gigawatts Jul 05 '20 at 03:15
  • You can tell if a property is defined with `window.getComputedStyle(element).getPropertyValue(property)!==undefined` but if it is defined the next thing you want is to check if it's inherited. You could defined every option on every class so that there is always a value defined but then you don't inherit the value and then your style declarations also grow. – 1.21 gigawatts Jul 05 '20 at 03:17
  • Your example would be better served by storing such values in javascript variables or in data attributes on the affected elements. CSS variables are good choice for storing values that are directly involved in styling but there's no way `--is-draggable: true` could be used that way (as in: `var(--is-draggable)`). – Ouroborus Jul 05 '20 at 10:00
  • Update: MDN says `getPropertyValue` returns an empty string if it is not defined. https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue which sort of works on a style object that is part of a style declaration. Also, the style declaration looks to be an object array because it has a length and indexed list of all the defined properties. This is in Firefox. – 1.21 gigawatts Jul 06 '20 at 05:04
  • What I mean by my last comment is that if you only need to check one style declaration of the element you can check if the property is defined using getPropertyValue() and checking for empty string or checking the array of style names using the rule.style object. Mostly this is a hack but can work in some cases. – 1.21 gigawatts Jul 06 '20 at 05:32

0 Answers0