htmlで値(変数)を定義する方法

1)HTMLタグに記述

①CSSでやる

<body>
<style type=”text/css”>
<!–
.parson1:before{content:”田中”;}
p.age1:after{content:”36歳”;}
–>
</style>
<h1>サンプル</h1>
<p class=”parson1″>は男の子</p>
<p class=”parson1 age1″>の年齢は</p>
<p>私の彼氏は<span class=”parson1″>君だよ</p>
</body>

 【結果】

smp_css

 


②PHPを使う

<body>
<?php $name=”山田太郎”; ?>
<p>
<?php echo $name; ?>は男です<br />
<?php echo $name; ?>の年齢は30歳です
</p>
</body>

 【結果】

smp_js


③Javascriptを使う

<body onload=”init();”>
<p>
<span class=”name1″>名前はいるとこ</span>は男です<br />
<span class=”name1″>名前はいるとこ</span>の年齢は30歳です
<script type=”text/javascript”>
<!–
function init() {
var nameStr = “山田太郎”;
var nameElements = document.getElementsByTagName(“span”);
for (var i = 0; i < nameElements.length; i++){
if (nameElements[i].className == “name1”) {
nameElements[i].innerText = nameStr;
}
}
}
–>
</script>
</p>
</body>

 【結果】

smp_js


2)外部ファイルに値(変数)記述して、HTMLで呼び込む
④Javascriptを使って、外部ファイルから値(変数)を取得する

**************【htmlファイル】*******************

<body>
<script type=”text/javascript” src=”smp_js2.js”></script>
<p>
<span class=”name1″>名前はいるとこ</span>は男です<br />
<span class=”name1″>名前はいるとこ</span>の年齢は30歳です
</p>
<script type=”text/javascript”>
<!–
init();
// –>
</script>
</body>

****************【jsファイル】*******************

function init() {
var nameStr = “山田太郎”;
var nameElements = document.getElementsByTagName(“span”);
for (var i = 0; i < nameElements.length; i++){
if (nameElements[i].className == “name1”) {
nameElements[i].innerText = nameStr;
}
}
}

 【結果】

smp_js

function init() {
var nameStr = “山田太郎”;
var nameElements = document.getElementsByTagName(“span”);
for (var i = 0; i < nameElements.length; i++){
if (nameElements[i].className == “name1″) {
nameElements[i].innerText = nameStr;
}
}
}
function path_config(){
var img = document.getElementById(‘path1’);
img.setAttribute(“src”,”http://golive50.com/yahoo/images/img4.jpg”);
}

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
</head>
<body>
<script type=”text/javascript” src=”smp_js.js”></script>

<p>
<span class=”name1″>名前はいるとこ</span>は男です<br />
<span class=”name1″>名前はいるとこ</span>の年齢は30歳です
<p><img src=”aaa.jpg” alt=”aaaa” id=”path1″></p>
</p>
<script type=”text/javascript”>
<!–
init();
path_config();
// –>
</script>
</body>
</html>



タイトルとURLをコピーしました