スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

動的にスタイルシートを切り替える

JavaScriptでスタイルシートを動的に切り替える方法。

切り替える方法には2通りあります。

1.スタイルシートファイルを切り替える
2.スタイルルールを追加する

1.スタイルシートファイルを切り替える


スタイルシートファイルを指定するときは<HEAD>タグ内に

<link rel="stylesheet" href="xxx.css" type="text/css" />


とします。

これをJavaScriptで別のファイルに切り替えるときは、
以下の内容の関数を作って実行する。

function ChangeStyle(file){
 if(document.all && document.getElementById){
  document.styleSheets(0).href = file; //スタイルシートファイルを切り替える
 }
}


しかし、この方法は<HEAD>タグ内にある<link>タグを書き換えるので
事前に設定しておく必要がある。
設定していない場合はエラーになるので注意。

2.スタイルルールを追加する


JavaScriptで以下のコードを実装する。

var ss = document.styleSheets[0];
if (document.all) {
 // IE
 ss.addRule("body", "color:blue");
} else {
 // FireFox
 ss.insertRule("body {color:blue}", ss.cssRules.length);
}


IEとその他ブラウザではメソッドが違うので注意。

IEだと要素名と値だけを引数に渡すことで出来るが
その他ブラウザでは挿入位置を引数に渡してやる必要がある。

この方法だと動作中に必要な要素だけ指定できるので便利。


で、どっちがいいの?



ファイルを切り替える方法は結構使い勝手が良くほとんどこちらの方式が
使われているようです。
ですが、必要最低限の要素だけを追加できる方法もJavaScriptをライブラリ化した場合に
意外と使えます。

指定する要素数が多い場合は、ファイル切り替え方式。
少ない場合は、ルール追加方式。
という風に使い分けてもいいと思います。
スポンサーサイト

IEで透過PNGを使う

友人が「IEで透過PNGが使えなくて困ってるのぉ~」(若干脚色有り)と言っていたので
調べてみたのでメモ。

いくつか方法があったけど、一番簡単でスマートなやり方がこれ。

iepngfix.js を使って透過PNGを背景に使う。
http://www.seo-maniax.com/other/ie6png/

一応、IEとFireFoxでの動作確認済み。

しかし、これはIEで透過PNGを綺麗に見せることが目的だからかもしれないけど、
IEでは綺麗に見えてFireFoxではちょっと違う感じに見えてしまいます。

でも、ちゃんと表示サイズとかをきっちり決めてしまえば大丈夫じゃないかなと思います。

続きを読む

プロフィール

DJコーク

Author:DJコーク
地方で細々とSEまがいの仕事をしています。

楽天ブック
最近の記事
Feed
月別アーカイブ
スポンサードリンク
グラビス|gravis ノーマディック|nomadic ヴィブラム|vibram ロープロ|lowepro
MoMA STORE
MoMAstore
MoMAstore
MoMAstore
MoMAstore
MoMAstore
リンク
カテゴリ
サイト
ランキング
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。