カテゴリー:Javascript小技

表示タイプ
リスト表示へ
ボックス表示中

Javascriptによる外部CSSファイルの切り替え(書き直し)

2008年1月28日 22:56

以前同じ記事を書いたんですが、サンプルデータが消えてしまったのと、
紹介があまり詳しくなかったので書き直してみました。
(たまたまこれを利用する機会もあったのでw)

▼とりあえずサンプルはこちら
Javascriptによる外部CSSファイルの切り替えサンプル

肝はjavascriptのみです。Javascriptソースはこんな感じ↓
  1. function cssChange(o){
  2. var linkObjs = document.getElementsByTagName('link');
  3. var selObj = o;
  4. for(i=0; i<linkObjs.length; i++){
  5. if(linkObjs.item(i).href.match(/\/theme\//)){
  6. linkObjs.item(i).disabled = true;
  7. }
  8. }
  9. for(i=0; i<linkObjs.length; i++){
  10. if(linkObjs.item(i).href.match(/\/theme\//) &&
  11. linkObjs.item(i).href.indexOf(selObj.value) != -1){
  12. linkObjs.item(i).disabled = false;
  13. }
  14. }
  15. }
動作は単純で、まずdocument.getElementsByTagName('link')でlink要素をすべて取得します。取得されたリストを元に、最初のfor文でthemeフォルダに格納されているCSSのみをdisabledをtrueにします。

こうすることで、一端すべてのthemeフォルダ内のCSSを無効化し、次のfor文で選択されたthemeのCSSを適用させます。(disabled = false)

【補足】
ひとつ目のfor文ですべての処理を一括してもいいのですが、
なぜかIE6、7ではalternate stylesheetがあらかじめ読み込まれていないのか、
1回目の変更ではCSSが有効になりませんでした。
なので、一回目のfor文ですべてを無効、という処理を入れることで
alternate stylesheetを認識させています。(と思ってますw)

ラジオボックスをCSSで装飾

2007年11月16日 12:15

ラジオボックスをCSSで装飾し、javascriptを使用してselect風に使えるようにしてみました。

とある案件で作ったものをサンプル用に修正したものですが、
なかなかうまくいったかなーと思ったのでアップしてみたり。

ラジオボックスをCSSで装飾

ちなみに「#itemList」のプロパティのtop:0をbottom:0に変更すると
リストが上に向かって展開します。
使う場所に応じて修正して使ってみてください。(使ってくれる人がいるかは分かりませんが・・(;´д`))

プルダウンメニューをさらに作り込んでみた

2006年12月14日 10:38

ということで、連日同じエントリーですが。
もう少し作り込んで、今回は別ページでサンプルをアップしてみました。

変更点としては、前回の物に比べ、色などのスタイルを修正。
加えて、下に階層が含まれているメニューについては、右端に▲のマークを
自動で追加するようにしてみました。
動作テストは「WinIE6、Firefx1.5、2.0」です。

※干し梅さんより指摘を頂き、サンプルを修正しました。
XHTMLがValidになるように修正しました。
>>サンプルページ
>>サンプルダウンロード

※サンプルダウンロードには、htmlファイル、cssファイル、jsファイルと、中で使われている画像ファイルが含まれています。

まだまだ改変の余地ありなので、改変や使用は完全フリーです。(というか、ダウンロードしてくれる人がいるんだろうか?w)
ただ、できればコメントとかくれるとさらにやる気がでるのでうれしいですw
(なんか変なとことかあったら言って下さい…)

タグ名から要素を検索する getElementsByTagName

2006年12月11日 10:36

ということで、タイトル通りですw
このメソッド(でいいのかな?)は、前々から知ってはいたんですが、
使い方を知りませんでした。そして、調べていたら
なんと前からほしい! と思っていたメソッドではないですか!

簡単に説明すると、

element.getElementsByTagName('タグ名');

とすると、elementで指定した要素の中に含まれる
'タグ名' を持つ子要素のリストを返す、というもの。
これで、親要素さえ取得できれば、その下の子要素にもアクセスできるようになる、という。

これを知らないときは、アクセスしたい子要素全部にidを付けてましたよ…。
ソースが無駄に増えるし、scriptも汎用性なくなるしで色々苦労した覚えが…。
でもこれからはそんな悩みもなくscriptが組める!

onmouseoverのイベントで関数に(this)でオブジェクトを渡してやって、
さらにその子要素にアクセスできれば、idなんかはできるだけ少なくて済みそうです。

知ってる人は知ってるだろし、わりと当たり前のことかもしれないけど、
わりと目からウロコだったので備忘録的に書いてみました(*'-')

Javascriptによる外部CSSファイルの切り替え

2006年6月22日 20:45

Javascriptによる外部CSSファイルの切り替え、なんとかできるようになりました。
ポイントは「document.getElementsByTagName("link")[i]」これ。
これでlink属性の情報を取得できるんだねー。

ただ、値を変更、というのはできない模様。
linkのalternate stylesheet属性を使って複数のCSSを読み込ませ、
それのdisabledを変更していくことでCSSが切り替わる仕組み。

簡単に言えば、alternate stylesheetでの切り替え作業をJavascriptが代替えする形かな。
(IE6にはCSS切り替え機能は未実装。内部的には把握してるらしいけど、むしろなんでやねんて感じw)

まぁJavascriptでアクセスできるなら、これが使えるからいちおう切り替えできるから文句言うまい。

大概は文字サイズとかを変更するのに使われるけど、これでmenuの位置を好きな場所に移動できる、みたいな感じで使えばわりと面白いかもしんない。

Cookieと組み合わせて自分流にカスタマイズさせる、みたいな。

とりあえずなにかに使えそうなので書いてみたw

サンプルはこちら↓
http://www.green.dti.ne.jp/edo/web-test/test4/


サンプルのアップ先のサーバを解約してしまったので、新しく作り直したら再度アップしたいと思います(;´д`)

※ついでもあったので、新しくエントリーを書き直しました。
書き直したエントリーは以下を参照ください。