spanタグ
spanタグ:
このタグで囲むと、囲まれた範囲に役割りを持たすことが可能。 (CSSや、Javascriptを使用)
例:囲まれた部分の色の変更、 囲まれた部分の文字の変更
使い方:
code:c
<!-- HTML -->
<span id = "tag"> text</span>
code:c
//Javascript
int i=0;
// id:.htmlのtagを取得し、Tagに格納する。
//javascriptでtagを使用するのに必要。
let Tag = document.getElementById("tag");
if(i = 0)
{
Tag.innerHTML = "text_OK"; // i=0の時、textをtext_OKに変更する。
}
テキストをクリックしたときに、変更する場合もこれが使用できる。
code:c
//Javascript
int i=0;
// id:.htmlのtagを取得し、Tagに格納する。
//javascriptでtagを使用するのに必要。
let Tag = document.getElementById("tag");
Tag.onclick = function()
{
Tag.innerHTML = "text_Click"; // Tagがクリックされたとき、textをtext_Clickに変更する。
}
例:
code:html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<span id = "tag"> text</span>
</div>
<script>
//Javascript
// id:.htmlのtagを取得し、Tagに格納する。
//javascriptでtagを使用するのに必要。
let Tag = document.getElementById("tag");
Tag.innerHTML = "text_OK"; //textをtext_OKに変更する。
</script>
</body>
</html>
このプログラムの「Tag.innerHTML = "text_OK"; 」をコメントアウトすれば、表示されるのはtextになる。
このプログラムにクリック処理をいれると。
code:html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<span id="tag"> text</span>
<script>
//Javascriptの記載
// id:.htmlのtagを取得し、Tagに格納する。
//javascriptでtagを使用するのに必要。
let Tag = document.getElementById("tag");
Tag.onclick = function () //tagがクリックされたら、この関数を実行
{
Tag.innerHTML = "text_Click"; // Tagがクリックされたとき、textをtext_Clickに変更する。
};
</script>
</body>
</html>
作成プログラム:test.html
となる。