- html側からの 読み込んだジャバスクリプトの文字列に色を付けた -
<p style="font-size: 18px;">
<Script src="tora.js"></script>：<b id="tora" style="color: #f00;"></b></p>
- 外部のジャバスクリプトのファイル 名 tora.js の内容
window.onload = function(){
document.getElementById("tora").innerHTML =
"id属性が「tora」である要素に、この赤い文字テキストを出力。";
}
HTMLの、hidden要素について hidden(隠されたとか秘密の意)プロパティ をそれぞれに使ってあります。
- <body>
- <!--画面に出るHTML のコード-->
- <p><center ><label><input type="checkbox" id="sampleAgree" onchange="sampleAgree()">
<strong style="color:green;font-size: 20px;">チェックして探すと恐竜が出てきます</strong></label></center></p>
<div style="margin-bottom: 5em;"></div>
- <!--画面に出ない隠れたHTML のコード-->
<fieldset id="sampleInput" hidden>
<a href="kyoulyu1.jpg"><img src="kyoulyu1.jpg"></a><!--https://masumo10.web.fc2.com/image/kyoulyu1.jpg-->
<legend>入力欄</legend>
<p>ＩＤ：<input type="text" name="name"></p>
<p>パスワード：<input type="password" name="password"></p>
</fieldset>
- <!--ジャバスクリプトのコード-->
- <script>
- function sampleAgree(){
$checked = document.getElementById("sampleAgree").checked;
$sampleInput = document.getElementById("sampleInput");
if( $checked ) {
$sampleInput.hidden = false;
}else{
$sampleInput.hidden = true;
}
}
- </script>
- </body>
-----------以下の参考-----------------
<SCRIPT LANGUAGE="JavaScript"><!--5〜19,時計を表示-->
<!--
function Clock2(){
myDate=new Date();
myHour=myDate.getHours();
myMinute=myDate.getMinutes();
mySecond=myDate.getSeconds();
if (myHour<10) {myHour="0"+myHour}
if (myMinute<10) {myMinute="0"+myMinute}
if (mySecond<10) {mySecond="0"+mySecond}
document.myform2.myclock2.value=" "+myHour+" 時 "+myMinute+" 分 "+mySecond+" 秒 ";
setTimeout("Clock2()",1000);
}
//-->
</SCRIPT>
<body onload="Clock2()" <!--5〜19,時計を表示にぶら下がり-->
<FORM name="myform2"> <!--5〜19時計を表示にぶら下がり-->
<INPUT name="myclock2" size="17" style="background-color:#000000; color:#00FFFF; font-size:12pt; font-weight:bold">
</FORM><small>2020_4_2 </smal>
</body>
<p class=" padding-a"></p> <SCRIPT>
<--
function MyLink(){
alink=document.flink.slink;
mlink=alink.options[alink.selectedIndex].value;
if(mlink!="-"){
location.href=mlink;
}
}
//-->
</SCRIPT>
<FORM method="post" name="flink">
<select name="slink">
<OPTION selected value="-">---------- メニュー -------</OPTION>
<OPTION value="-">------------------------</OPTION>
<OPTION value="https://masumo10.web.fc2.com/j12.html">時と日付の色と大きさを JavaScript でかえてみよう</OPTION>
<OPTION value="https://masumo10.web.fc2.com/zhizuke.html">今日の日付を表示させよう</OPTION>
<OPTION value="https://masumo10.web.fc2.com/zalert1.html">ボタンでアラートを表示させよう</OPTION>
<OPTION value="https://masumo10.web.fc2.com/zback1.html">ボタンで背景の色をかえてみよう</OPTION>
<OPTION value="https://masumo10.web.fc2.com/zlink1.html">ボタンでリンクさせよう</OPTION>
<OPTION value="-">------------------------</OPTION>
</select><br><br>
<INPUT type="button" value="上の右側の▼で選択してこのボタンを押してくださいGO!" onClick="MyLink()">
<frameset framespacing="0" border="0" frameborder="0" cols="160,*">
<frame name="contents" target="main" src="frame1.htm" scrolling="auto">
<frame name="main" src="frame2.htm" scrolling="auto">
</frameset>
</INPUT></FORM><br><br>