How can I tell if a particular CSS property is inherited with jQuery?

Question

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?

Reas

Answer 1

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
}