ユーザーがWebページの特定のスタイルを変更できるようにするいくつかの設定を備えたWebページがあります。IDとクラスの両方のスタイルを変更できるように成功しましたが、cssスタイルシートが元々持っていたものにリセットするための迅速で簡単な方法があるかどうか疑問に思っていました(SVGのbaseValとanimValのように) .
私のJavaScriptは次のとおりです。
function cssrules() {
var rules = {};
var ds = document.styleSheets,
dsl = ds.length;
for (var i = 0; i < dsl; ++i) {
var dsi = ds[i].cssRules,
dsil = dsi.length;
for (var j = 0; j < dsil; ++j) rules[dsi[j].selectorText] = dsi[j];
}
return rules;
};
function css_getclass(name) {
var rules = cssrules();
if (!rules.hasOwnProperty(name)) throw 'todo:deal_with_notfound_case';
return rules[name];
};
function modify_css(data) {
var i, mod;
for (i = 0; i < data.length; i += 1) {
mod = data[i].change;
css_getclass(mod).style[data[i].changing] = data[i].value;
}
}
//some example data
var mod = [{
change: ".large_glow",
changing: "color",
value: "red"
}, {
change: ".large_glow",
changing: "text-shadow",
value: "0px 0px 20px #900"
}];
document.getElementById("click").addEventListener("click", function() {
modify_css(mod);
});
.large_glow {
text-shadow: 0px 0px 10px #555;
}
<span class="large_glow">This is some text</span><br>
<button id="click">Change the class</button><br>
<button id="not_click">Revert the class (if possible)</button>
そうでない場合は、元のクラスごとに配列を作成し、上記の関数を使用して元の状態に戻すのは簡単だと確信しています。
これまでjQueryを使用したことがなく、外部ライブラリを避けたいので、jQueryを使用する必要はありません。