すたらブログ

文系Webプログラマの備忘録

JavaScriptで追加したスタイル指定を削除して元のCSSの指定に戻す方法

結論

jQueryでも素のJavaScriptでも、空文字''を代入すればいいようです。


CSS

#foo {
    width: 20%;
}

jQuery

// スタイル指定する
$('#foo').width('100%');

// 元のCSSの指定に戻す
$('#foo').width('');

JavaScript

// スタイル指定する
document.getElementById('foo').style.width = '100%';

// 元のCSSの指定に戻す
document.getElementById('foo').style.width = '';

すごく悩んでいたのですが、こんな簡単な解決方法で拍子抜けしました。


経緯

これまでは元の指定を変数に保存していました。

// 保存
var original = $('#foo').width();

// 元に戻す
$('#foo').width(original);

元の指定がピクセル値のような固定した値ならば問題ないのですが、最初の例のようなパーセントだと元に戻せません
.width()で値を取得した段階で、パーセントからピクセルに変換されてしまいます。
それを再び指定しても、元のパーセント指定には戻りません。
ここで非常に悩まされましたが、最終的に解決してよかったです。