[JS]Javascriptの有効・無効でCSSを変更する

javascriptが無効の時、有効で使ってるCSSだと表示がおかしくなる場合の回避方法について。

最近作ったサイトが、コンテンツの表示をmootoolsで動かしていて(スライドとかで)、javascript無効にすると まったく見えない状態になってしまう。
XHTMLソースを変更しているわけではないので、CSSだけ変更すれば見れる状態になる。(CSS無効でもXHTMLだからそれなりに見れる)
というわけで、javascriptの有効・無効でCSSを変更する方法についてのメモ。

Javascriptが無効・有効でCSSを2つ用意して、デフォルト(初期にlinkしておくもの)を無効の時のCSSにする。
<link>タグにidを設定して、javascriptでhref部分を変更すれば有効・無効でCSSの切り替えが出来る。

<link href="noscript.css" rel="stylesheet" type="text/css" id="css" />
document.getElementById ('css').href = 'style.css';

mootoolsで書くとこうなる。

$('css').setProperty('href', 'style.css');

domreadyでもok。

Javascriptで書き換える分だけ、一瞬noscript時のCSSが見えてしまうわけだが、これで一応両対応に出来るはず…。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください