カテゴリー:Javascript小技

リスト表示へ

現在適用されているCSSの値をJavascriptで取得する

2008年9月25日 00:35

この記事は、[暴満館]さんの「JavaScriptによるCSSの操作」[IT戦記]さんの「getComputedStyle について調べてたら深みにハマったのでメモ」を参考にさせて頂きました。n

外部CSSファイルなどから適用されているCSSのスタイル(や値)を取得するスクリプトです。n通常、Javascriptからstyleを操作する場合、「element.style.marginLeft = '15px'」などと記述すると思います。nしかしこれ、「style = element.style.marginLeft」などとしても、Javascriptで値を設定したあとでないとうまく値を取得できません。n

ということで、今回はJavascriptを使って、外部(内部)CSSや、直接指定されているスタイルなどの値を取得するスクリプトの紹介です。
「現在適用されているCSSの値をJavascriptで取得する」サンプル

Prototype.jsなどのライブラリをダウンロードせずに使えるGoogleサービス

2008年9月 1日 23:01

とある記事で見つけた画期的なGoogleサービスを紹介してみる。
今回紹介するのは以下のサービス。n

AJAX Libraries API

Prototype.jsやjQuery.jsなど、最近よく使われているJavascriptライブラリたち。
メインで使っているライブラリやそれのプラグインでは実現できない(あるいはちょっとめんどくさい)表現を、別のライブラリを使って実現しようとしたりすると、メインではないだけにどこに保存したか忘れていたり、まったく新規の場合はダウンロードサイトから落としてきて解凍してアップしたり・・。n

ライブラリは便利でも、ver違いがあったり読み込むファイルを変更したりが面倒になってくる。そこで活躍するのが上記サービス。

これはGoogleが提供しているサービスで、各verごとの有名なJSライブラリをGoogleのサイトから読み込ませる、というもの。
以下に利用するための簡単な説明を書きます。n

Javascriptで動的にCSSファイルを追加する

2008年8月24日 19:59

jQueryやprototype.jsなどのライブラリとともに、CSSファイルを同時に読み込ませる必要がある場合があると思います。
そんなとき、そのライブラリと一緒にCSSなんかも外部jsファイルから追加できると便利です。
外部jsファイルのスクリプトからCSSを動的に読み込ませるスクリプトサンプルです。n

「Javascriptで動的にCSSを追加する」サンプル

ページを移動する前に確認メッセージを表示する

2008年6月 8日 10:19

コメント入力中だったり、決まったページ遷移から外れる処理だったり、ページを移動する前に確認したい場合があると思います。
最近の案件で、これを使う機会があって調べたのでメモ的にエントリーしてみます。
ちなみに、これを簡単に実装するスクリプトも書いてみたのでよかったら使ってみてください。

ってことで以下サンプル↓

たった1行でIEかどうかを判別するJavascript

2008年5月22日 15:08

PHPSPOT開発日誌さんの JavaScriptでIEかどうかをたったの1行で判別する方法 で見つけたものです。ので、今回は完全に備忘録としての記事です。
タイトル通り、たった 1 行で IE かそうでないかを判別するスクリプトです。

▼ということで、詳細は以下から。

画像のロールオーバーを自動化するJavascript

2008年4月24日 09:44

画像のロールオーバー(マウスオーバー)での処理を実現する JavaScript を新しく作り直しました。body 要素に対して onload を指定せずにスクリプトを読み込むだけで動作するようにしてあります。
手軽に画像のロールオーバー効果を実装するJavaScript

さて、ちょっと仕事で簡単なJavascriptを作る機会があったのでそれを公開してみる。
(記事が最近全然書けてなかったから間に合わせってわけじゃありません・・たぶん)n

最近たまに思うのが、CSS で無理にロールオーバーを実装しなくてもいいんじゃないか、ということ。
背景だけを変更する、とかならむしろ CSS が最適解なんだと思うのだけど、テキストごと置換してしまうような場合は JavaScript のほうが手軽だし、alt も効くしいいのかなと。
JavaScript オフの人に対しては動きがなくなるけど、むしろオフの人はそういう動きを嫌っているのだからロールオーバーの効果がなくても問題ないのかなと。n

Javascriptオフの場合にレイアウトが大幅に崩れてしまうような使い方は NG だと思うけど、ちょっとした利便性のための効果、くらいならJavascriptで実装してもいいと思う。n

さて、前置きが長くなりましたが、作成したサンプルはこちらです。

画像のロールオーバーを自動化する Javascript デモ

ダウンロード

実装は簡単で、javaScript を読み込ませて body の onload でスクリプトを実行するだけで、指定のクラス名がついた画像に対してロールオーバーの処理を自動で付与する、というものです。n

クラスを追加するだけで簡単にページ内分割を実装するJavascript

2008年3月17日 10:17

更新履歴

2008/09/25
kenta さんの指摘により、ページ指定をしていなくても 1 ページ目を表示するように修正しました。n
2008/03/21
機能を若干拡張しました。
自動生成されたページング部分に、ページ内リンクを設定しました。
これにより、ページ内リンクを含んだリンク(ex. index.html#no3 など)を設定しておくことで自動的に該当のページ部分を表示するように修正しました。
また、ページ内リンクはページを移動する際に自動で付与されます。n

サンプル URL

ちょっとした不具合があったので修正しました(;´д`)(2008/03/17 21:33現在)

ページをやたらと細切れにして PV 数を稼ごうとするメディアサイトの問題と解決策 | Web担当者Forumの記事受けて、ページ分割を簡単に実装できる JavaScript を作ってみました。n

▼サンプル
ページングサンプル

クラスを追加するだけで簡単にページ内分割を実装するJavascriptデモ

ダウンロード

使い方はとても簡単で、分割したい要素にクラス名を追加するだけです。
※Javascriptオフの場合は、分割をなくしてすべてを表示します。
以下、使い方を。n

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

2008年1月28日 22:56

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

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

肝は JavaScriptのみです。JavaScript ソースはこんな感じ↓n

ラジオボックスを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
(なんか変なとことかあったら言って下さい...)

前の10件 1  2  3