CSSを制御するわけですからCSSの知識が必要になります
CSSが全くわからないって人はCSSを解説しますで解説を読んできてください
では↓のコードをみてください
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
p#css{
color: #00F;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
</head>
<body>
<p id="css">CSS</p>
</body>
</html>
これはCSSで「CSS」という文字を青色にしているだけの単純なコードです
同じことをJavaScriptで再現することができます
そのコードが↓です
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
</head>
<body>
<p id="css">CSS</p>
<script type="text/javascript">
document.getElementById("css").style.color="#00F";
</script> </body>
</html>
つまり↓の２つは同じ意味って事です
p#css{
color: #00F;
}
document.getElementById("css").style.color="#00F";
「document.getElementById("css")」までは何度も使っているのでお解りだと思いますが再度解説します
「css」というIDのタグをいじりたいってことなので「p#css」と同じことですね
残りの部分の「.style.color="#00F"」ですがこれは「.style.プロパティ="属性"」という形になっています
「.style」部分はCSSをいじるという決まり文句だと覚えてください
つまり「document.getElementById("ID").style.プロパティ="属性"」という形を覚えればOKなんです
でもCSSあるから別にこんなの覚えなくて良いよと思ったあなた↓のコードを試してみてください
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
//色の値を保持する
var iro=0;
//点滅間隔
var kankaku=500;
//「iro」が0なら青1なら赤になる
function tenmetu(){
if(iro==0){
iro=1;
document.getElementById("css").style.color="#00F";
}
else{
iro=0;
document.getElementById("css").style.color="#F00";
}
}
//「tenmetu()」を「kankaku」の間隔置きに呼び出す
setInterval("tenmetu()",kankaku);
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
</head>
<body>
<p id="css">CSS</p>
</body>
</html>
JavaScriptでCSSを制御するとこのように色の点滅なんかもできちゃうんです
「// 文字の現在位置」はコメントです
プログラムの動作には全く影響を与えません
今後コードが複雑になっていくので今回から書く事にしました
コードの解説ですが「tenmetu()」は、「if文」で「iro」が0なら1に変えて青文字に、1なら0に変えて赤文字に変えるという単純なものです
「setInterval」でその「tenmetu()」を「tenmetu」に設定した間隔で呼び出し色を変えています
CSSをいじる時は「document.getElementById("ID").style.プロパティ="属性"」という形になる
以上
次回は「動く文字を作っちゃえ」です。