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: