Displaying Differences in CSS Styles: A Memo

Displaying CSS Style Differences

<script>
      var styleSnapshots = [];
      var classNames = {};

      var styleParams = [
          'height',
          'width',
          'margin',
          'padding',
          'position',
          'top',
          'bottom',
          'lineHeight',
      ];

      function getStyleData(element){
          var data = {};
          var cs = window.getComputedStyle(element);
          // console.log(cs);
          for(var param of styleParams){
              data[param] = cs[param];
          }
          return data;
      }


      function snapshot(snapshotIndex, path, element) {
          if (styleSnapshots.length <= snapshotIndex) {
              styleSnapshots[snapshotIndex] = {};
          }
          classNames[path] = element.getAttribute('class');

          styleSnapshots[snapshotIndex][path] = getStyleData(element);
          var children = element.children;
          for (var i = 0; i < children.length; i++) {
              var child = children[i];
              var tagName = child.tagName;
              var path2 = `${path}${tagName}[${i}]/`;

              snapshot(snapshotIndex, path2, child);

          }
      }

      function diffSnapshot(i0, i1) {
          for (var path in styleSnapshots[i1]) {
              if (!styleSnapshots[i0][path]) {
                  console.log(`${path} before undefined`);
                  continue;
              }
              if (!styleSnapshots[i1][path]) {
                  console.log(`${path} after undefined`);
                  continue;

              }
              var className = classNames[path];


              for (var sp of styleParams) {


                  if (styleSnapshots[i0][path][sp] != styleSnapshots[i1][path][sp]) {
                      console.log(`${path} ${className} ${sp} ${styleSnapshots[i0][path][sp]} -> ${styleSnapshots[i1][path][sp]}`);
                  }
              }
          }

      }

      snapshot(0, '/', document.querySelector('.navlist'));

      setTimeout(function () {
          snapshot(1, '/', document.querySelector('.navlist'));

          diffSnapshot(0, 1);

      }, 3000);
</script>