CSS - How to get a list of CSS style differences between two HTML elements with Javascript
Table of Contents
About
This article shows you how to programmatically with Javascript get the styles property difference between two HTML element with Javascript
Steps
The script
The function that:
- select the element with a selector (one for each)
- onlyTextProp filters the layout properties: padding, margin, border, display
- uses the window.getComputedStyle function.
let cssDiff = function (firstSelector, secondSelector, onlyTextProp = true) {
let firstElement = document.querySelector(firstSelector);
let firstElementStyles = window.getComputedStyle(firstElement);
let firstElementTitle = firstElement.innerText.substr(0, 10);
let secondElement = document.querySelector(secondSelector);
let secondElementStyles = window.getComputedStyle(secondElement);
let secondElementTitle = secondElement.innerText.substr(0, 10);
let attributeName;
let firstValue;
let secondValue;
//console.clear();
console.log(`New Diff between ${firstElementTitle} and ${secondElementTitle}`)
let sameCounter = 0;
let diffCounter = 0;
for (let i = 0; i < firstElementStyles.length; i++) {
attributeName = firstElementStyles.item(i);
if(onlyTextProp) {
let isLayoutAttribute = attributeName.match(/^(margin|border|padding|display).*/m);
if (isLayoutAttribute) {
continue;
}
}
firstValue = firstElementStyles.getPropertyValue(attributeName);
secondValue = secondElementStyles.getPropertyValue(attributeName);
if (firstValue !== secondValue) {
console.log(`${attributeName}: ${firstValue} vs ${secondValue}`);
diffCounter++;
} else {
sameCounter++;
}
}
console.log("End Diff")
console.log(`Total: ${firstElementStyles.length}`)
console.log(`Same: ${sameCounter}`);
console.log(`Diff: ${diffCounter}`);
}
Usage: demo
- The two paragraph elements to compare
<p style="font-weight:bold">A paragraph element with bold</p>
<p>A basic paragraph element</p>
- The javascript
let firstElementSelectors = "p";
let secondElementSelectors = "p:nth-child(2)";
cssDiff(firstElementSelectors, secondElementSelectors )
- Output: