I want to create a JavaScript object for an element which describes all the computed styles that have an effect, either directly or from a parent. Ideally in the same fashion as inspect element does (the list you see under the elements tab of the inspect console in chrome or Firefox).
Like this.
the section of inspect element I need to try to recreate;
I want to get the styles that effect any particular element selected and then know the class name or ID name where they are being set, just like in the chrome inspect element.
So far I can get the classes and ID's of that element, then I can get the style rules for each of those. But, I need to also get the styles of the parents which are in effect through parental hierarchy. First I thought to traverse up the DOM getting all the parent styles along the way and then filtering out any which don't effect children. But I know this will be fairly complicated. Can anyone help add to what I have so far? I still need to figure out how to get the @queries that apply to the element, and that also needs to be responsive. I.e. if the screen resizes and a new media query is selected by the CSS, it needs to re calculate to get the corresponding queries. Also I need to filter out a list of rules that are not applicable to children. Is there such a list anywhere?
I thought id try another way. I tried to get the computed styles like this..
var cssClassObj = [];
cssClassObj['classA'] = [];
cssClassObj['classA']['background'] = '#000';
cssClassObj['classB'] = [];
cssClassObj['classB']['color'] = '#fff';
cssClassObj['classC'] = [];
cssClassObj['classC']['color'] = 'red';
var cssIDObj = [];
cssIDObj['starthere'] = [];
cssIDObj['starthere']['text-decoration'] = 'underline';
var i = 0;
var StyleOBJ = [];
var el = document.getElementById('starthere');
//var style = getComputedStyle(link);
var overwrittenRules = [];
var thisParentTree = [];
var ThisStyleOBJ = getObj(StyleOBJ, el, overwrittenRules, thisParentTree);
console.log(ThisStyleOBJ);
function getObj(styleObj, el, overwrittenRules, parentTree, start = true) {
if (el != document) {
var classes = el.classList;
for (var className in classes) {
if (classes.hasOwnProperty(className)) {
var cssStyles = cssClassObj[classes[className]] || null;
for (var style in cssStyles) {
if (cssStyles.hasOwnProperty(style)) {
if (typeof overwrittenRules[style] !== "undefined") {
cssStyles[style] += " :Omitted!!";
} else {
overwrittenRules[style] = true
}
}
}
StyleOBJ['class-' + classes[className]] = cssClassObj[classes[className]] || null;
if (!start) {
parentTree[++i] = el;
StyleOBJ['class-' + classes[className]]['Parentree'] = parentTree.slice();
}
}
}
if (el.id) {
StyleOBJ['id-' + el.id] = cssIDObj[el.id] || null;
}
var parent = el.parentNode;
styleObj = getObj(styleObj, parent, overwrittenRules, parentTree, false);
}
return styleObj;
}.classA {
background: #000;
}
.classB {
color: #fff;
}
.classC {
color: red;
}<body>
<div class="classA">
<div class="classB">
<p id="starthere" class="classC">
Open up the console to see the object. It contains all the styles and anything which is overwritten has been marked as Omitted. Each element has a parent tree of nodes, if it is a parent.
<br/><br/>
Still to do is;
<br/>
Check if !important is used and update the omitted children.
<br/>
@queries which are currently effecting the element
<br/>
find a way to automatically turn the style sheet into an object instead of having to hardcode it
</p>
</div>
</div>Please Note that for some reason SO doesn't show the resulting object in the snippet so you have to open up the console to see the output when you click run.
It's coming together now, but needs to be finished.
Thanks in advance.
