--- slug: "css-style-diff" title: "CSSスタイルの差分を表示メモ" description: "Django Allauth の SocialAccount を使うログインから、特定の社内アプリへ自動リダイレクトさせる `LOGIN_REDIRECT_URL` カスタマイズ。" url: "https://www.ytyng.com/blog/css-style-diff" publish_date: "2019-02-10T06:23:16Z" created: "2019-02-10T06:23:16Z" updated: "2026-05-11T13:21:46.605Z" categories: ["css"] keywords: "" featured_image_url: "https://media.ytyng.com/resize/20230812/061a58f527fb48c395e4cf6718656cf4.png.webp?width=768" has_video: false has_music: false video_urls: [] music_urls: [] lang: "ja" --- # CSSスタイルの差分を表示メモ

CSSスタイルの差分を表示

<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>