jQueryで遊んでみる その5
いつまでつづくこのシリーズ..
jQueryで動的にCSSを割り当てられるのでやってみた。
サンプル→
サンプルのソースはこんなふう
CSSだと、background-color:#00ff00; と書くところ、
backgroundColor:”#00ff00″
と、ハイフンを取って次の字を大文字にすることと
値はダブルクオーテーションで囲むという違いがある。
カンマ区切りでいくつでも割り当てられる。
このサンプル程度だとCSSで完結出来てしまうけど、
a:hoverではない、リンクテキスト以外にも使えたり
画像のサイズを変えたり、アイデア次第でいろいろできそうだ。
じゃあどんなのができるか次回あたりで。
jQueryで動的にCSSを割り当てられるのでやってみた。
サンプル→
サンプルのソースはこんなふう
<script type="text/javascript"> $(function(){ //初期状態 $(".camcam").css({ backgroundColor:"red", width:"200px", fontSize:"20px" }); //ロールオーバー $(".camcam").mouseover(function() { $(this).css({backgroundColor:"#00ff00"}); }); //ロールアウト $(".camcam").mouseout(function() { $(this).css({backgroundColor:"red"}); }); }); </script> |
backgroundColor:”#00ff00″
と、ハイフンを取って次の字を大文字にすることと
値はダブルクオーテーションで囲むという違いがある。
カンマ区切りでいくつでも割り当てられる。
このサンプル程度だとCSSで完結出来てしまうけど、
a:hoverではない、リンクテキスト以外にも使えたり
画像のサイズを変えたり、アイデア次第でいろいろできそうだ。
じゃあどんなのができるか次回あたりで。
