1日1tech

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告|
  3. トラックバック(-)|
  4. コメント(-)

JavaScript で CSS を動的にいじる(透明度の設定)

CSS で半透明の設定って、MSIE しかできないと思ってたら、Mozilla でもできるんですね。不勉強でした。。。
css で透明度50%にする指定なら、こんな感じで指定すると半透明で表示されます。Opera も ver 9 以降ならいけるみたいです。

opacity: 0.5;
-moz-opacity: 0.5;
filter:alpha(opacity=50);


で、JavaScript で動的に CSS のプロパティ値を変更する時、MSIE ではうまくいくのに、MozillaFirefox ではうまくいかないな~と思ったら、こんな事ではまってました。

document.getElementById(hoge).style.filter = "alpha(opacity=50)"; document.getElementById(hoge).style.MozOpacity = 0.5; document.getElementById(hoge).style.opacity = 0.5;

表記違うし。大文字小文字で区別されるし。
気がつくまで1時間は悩みました orz
※10/11 追記:はてブで間違い指摘してくださってたので修正しました。ありがとうございます。

その他、JavaScript で CSS プロパティをいじるためのメモは追記で
背景画像の指定
document.getElementsByTagName('body').item(0).style.backgroundImage = "url(./hoge.jpg)";

枠線の指定(上辺)
document.getElementById(hoge).style.borderTop = "#000 1px solid";

背景色を透明に
document.getElementById(hoge).style.backgroundColor = "transparent";


参考:
SELFHTML: JavaScript / JavaScript オブジェクト一覧表 / style
http://jp.selfhtml.org/javascript/objekte/style.htm
スポンサーサイト
  1. 2006/08/21(月) 21:12:08|
  2. develop|
  3. トラックバック:0|
  4. コメント:2

コメント

はじめまして

CSSで半透明にできるんですね。
今度実践してみます。
  1. 2006/08/23(水) 12:41:17 |
  2. URL |
  3. go0ogle #mQop/nM.
  4. [ 編集]

そうなんですよね。
まだ試してないのですが、Nintendo DS のブラウザも Opera だし、もしかしたら半透明いけるかもしれません。
  1. 2006/08/29(火) 13:03:56 |
  2. URL |
  3. miya #-
  4. [ 編集]

コメントの投稿

管理者にだけ表示を許可する

トラックバック

トラックバックURLはこちら
http://miyana2m.blog2.fc2.com/tb.php/341-94295d25
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。