CSSスタイルの差分を表示メモ

(Comments)

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

Comments

Recent Tweets

  • 大坂昌彦

    大坂昌彦 @masahiko_osaka

    ytyng

    ついに犯人がわかってしまいました! ナル、一昨日にも僕だったので、昨日の人しかいません!! ペダルにガムテープ貼っても良いけど、剥がして帰って欲しい。散々、自分の足で踏みつけたガムテープを何で次の人が剥がさなきゃならないの??自分… https://t.co/Contz66ZK9
    1 month ago

  • ytyng

    ytyng @ytyng

    Shopify の在庫数更新API GraphQLの場合: 一括更新できる 絶対値更新できない REST API の場合: 一括更新できない 絶対値更新できる なんなのそれ https://t.co/0QyibNQXdt
    1 month, 3 weeks ago

  • ytyng

    ytyng @ytyng

    #bulma スペーシングヘルパー、マージされてる! もうこれBootstrapじゃん https://t.co/uI8fZ6lAOw
    1 month, 3 weeks ago

Recent Posts

Archive

2020
2019
2018
2017
2016
2015
2014
2013
2012
2011

Categories

Authors

Feeds

RSS / Atom