マジレス希望

Javascript, CSSに詳しい方お願いします！

解決済

質問者：ちょうさん
質問日時：2015/10/20 22:24
回答数：3件

初質問失礼致します。現在、FirefoxのWebIDEでアプリ開発を行っているのですが、いきずまってしまい今回質問致しました…質問内容ですが、Javascriptで画像出力する際にCSSを適用したいのですが、その方法が全くわかりません…CSSの内容は以下のものです。
.frame {
position: absolute;
width: 50%;
height: 50%;
top: 10;
left: 10;
border:none;
background-color: rgba(59, 0. 0, 0);
visibility:visible;
}
このcssで定義したものをJavascriptで画像出力する際に画像に適用したいのです。初心者ということもあり、1週間以上調べてもわからず非常に困っています…詳しい方どうか宜しくお願いします。

返信ありがとうございます！htmlのbody内で<img src="hoge.jpg" class="frame">を書いたら確かに画像が表示されるのですが、今回は出来ればJavascriptで画像表示をして画像を動的に制御したいと考えています。具体的には指定した時間に画像が消えるといった処理です。

No.1の回答に寄せられた補足コメントです。補足日時：2015/10/21 00:15
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2015/10/21 08:50

ご質問の意味を理解できていませんけれど、こんな感じのことでしょうか？

スクリプトで画像要素を生成し、一定時間（例では2秒）後に非表示にする。
（表示/非表示の制御をしたいだけなら、スクリプトで要素を生成する必然性はありません。）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
.frame {
position: absolute;
width: 50%; height: 50%;
top: 10; left: 10;
border: none;
background-color: rgba(59, 0. 0, 0);
visibility: visible;
}
</style>

</head>
<body>
<div id="fuga"></div>

<script type="text/javascript">
var img = document.createElement("img");
img.src = "img/photo01.jpg";
img.className = "frame";
document.getElementById("fuga").appendChild(img);

setInterval(function(){ img.style.display= "none";}, 2000);
</script>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

jsを外部から読み込む必要があったので、書き方が変わったせいか画像にCSSが適用出来ませんでしたが、一定時間後に画像を非表示にすることはできました！見ず知らずの他人にソースまで書いて頂き、感謝の気持ちで一杯です。CSSをどこで適用しているのかがちょっとわかりませんでしたが書いて頂きましたソースをいじりながら、あとは自力でがんばりたいと思います。本当にありがとうございます！

通報する

お礼日時：2015/10/21 11:55

No.3

回答者： fujillin
回答日時：2015/10/21 11:17

ANo2です。

改めて見たらおかしなことになってました。
　setInterval →　setTimeout　にしないとおかしいですね。

また、要素生成をごく簡単にやるなら(ちょっと違うけれど）、以下でも可能です。
document.write("<img src='img/photo01.jpg' class='frame'>");