JavaScript/HTMLおぼえがき

｜JavaScript｜JavaScript/HTML｜ サイトマップ｜ホーム｜

HTML/ＣＳＳの操作

表示スタイルの変更　　　戻る

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>表示スタイルの変更</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script>
<!--
function c(f) {
  switch (f) {
  case  11:m.style.fontStyle    = "normal"; break;
  case  12:m.style.fontStyle    = "italic"; break;
  case  21:m.style.fontWeight   = "normal"; break;
  case  22:m.style.fontWeight   = "bold";   break;
  case  31:m.style.fontSize     = "20pt";   break;
  case  32:m.style.fontSize     = "14pt";   break;
  case  33:m.style.fontSize     = "10pt";   break;
  case  41:m.style.fontFamily   = "ＭＳ Ｐゴシック";break;
  case  42:m.style.fontFamily   = "ＭＳ Ｐ明朝";    break;
  case  51:m.style.color        = "#000000";   break;
  case  52:m.style.color        = "#ff0000";   break;
  case  61:m.style.backgroundColor = "#ffffff";     break;
  case  62:m.style.backgroundColor = "#ffff00";     break;
  case  71:m.style.margin      = "10px";    break;
  case  72:m.style.margin      = "50px";    break;
  case  73:m.style.margin      = "30px";    break;
  case  81:m.style.borderWidth = "1px";     break;
  case  82:m.style.borderWidth = "3px";     break;
  case  83:m.style.borderWidth = "5px";     break;
  case  91:m.style.borderStyle = "none";    break;
  case  92:m.style.borderStyle = "solid";   break;
  case  93:m.style.borderStyle = "dotted";  break;
  case 101:m.style.borderColor = "#000000"; break;
  case 102:m.style.borderColor = "#ff0000"; break;
  case 103:m.style.borderColor = "#0000ff"; break;
  case 111:m.style.padding     = "10px";    break;
  case 112:m.style.padding     = "50px";    break;
  default:alert("OTHER");    break;
  }
}
//-->
</script>
</head>
<body>
<hr>
<div id="m">それぞれの文字キーワードをクリックするとそれぞれの表示スタイルが変わります。
<p>１．文字スタイル（<a href="#" onclick="c(11)">通常</a>、<a href="#" onclick="c(12)">イタリック</a>）</p>
<p>２．文字の太さ（<a href="#" onclick="c(21)">標準</a>、<a href="#" onclick="c(22)">太字</a>）</p>
<p>３．文字サイズ（<a href="#" onclick="c(31)">大</a>、<a href="#" onclick="c(32)">中</a>、<a href="#" onclick="c(33)">小</a>）</p>
<p>４．フォント名（<a href="#" onclick="c(41)">ＭＳ Ｐゴシック</a>、<a href="#" onclick="c(42)">ＭＳ Ｐ明朝</a>）</p>
<p>５．前景色（<a href="#" onclick="c(51)">（黒</a>、<a href="#" onclick="c(52)">赤 </a>）</p>
<p>６．背景色（<a href="#" onclick="c(61)">白</a>、<a href="#" onclick="c(62)">黄</a>） </p>
<p>７．マージン（<a href="#" onclick="c(71)">１０ｐｘ</a>、<a href="#" onclick="c(72)">５０ｐｘ</a>）</p>
<p>８．ボーダ幅（<a href="#" onclick="c(81)">３ｐｘ、</a><a href="#" onclick="c(82)">５ｐｘ） </a></p>
<p>９．ボーダスタイル（<a href="#" onclick="c(91)">無</a>、<a href="#" onclick="c(92)">実践</a>、<a href="#" onclick="c(93)">点線</a>）</p>
<p>１０．ボーダカラー（<a href="#" onclick="c(101)">黒</a>、<a href="#" onclick="c(102)">赤</a>、<a href="#" onclick="c(103)">青</a>）</p>
<p>１１． パディング（<a href="#" onclick="c(111)">１０ｐｘ</a>、<a href="#" onclick="c(112)">５０ｐｘ</a>）</p>
</div>
<hr>
</body>
</html>

スタイルの変更方法　　　戻る

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS変更</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style_a.css" disabled = "true"  id="style-a">
<link rel="stylesheet" href="style_b.css" disabled = "false" id="style-b">
<style>
<!--
.class_a{
  border-width:0px;
}
.class_b{
  border-width:3px;border-style:solid;border-color:#FF0000;
}
-->
</style>

</head>
<body>
<script>
function class_a() {
  dv.className = "class_a";
}
function class_b() {
  dv.className = "class_b";
}
function style_a() {
  hd.style.backgroundColor = "#000000";
  hd.style.color = "#ffffff";
}
function style_b() {
  hd.style.backgroundColor = "#ffff00";
  hd.style.color = "#0000ff";
}
function sheet_a() {
  document.getElementById("style-a").disabled = true;
  document.getElementById("style-b").disabled = false;
}
function sheet_b() {
  document.getElementById("style-a").disabled = false;
  document.getElementById("style-b").disabled = true;
}
</script>
  <h1 ID="hd">スタイルの変更方法</h1>
<div id="dv" class="class_a">
  <p>classの変更：<button onclick="class_a()">class a</button> <button onclick="class_b()">class b</button></p>
  <p>styleの変更：<button onclick="style_a()">style a</button> <button onclick="style_b()">style b</button></p>
  <p>stylesheetの変更：<button onclick="sheet_a()">sheet a</button> <button onclick="sheet_b()">sheet b</button></p>
</div>
</body>
</html>

ＨＴＭＬの追加変更　　　戻る

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>HTMLの追加変更</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script>
<!--
function c(f) {
  switch (f) {
  case 　1:m.innerHTML ="文字を表示します。" ; break;
  case 　2:m.innerHTML ='<table border="1"><tbody><tr><td>Ａ</td><td>Ｂ</td></tr><tr><td>Ｃ</td><td>Ｄ</td></tr></tbody></table>' ;break;
  case 　3:m.innerHTML ='<input type="button" value="ボタン" onClick=al("ok")>' ;break;
  default:alert("OTHER");    break;
  }
}
//下記の様な書き方もあります。
//document.getElementById("dcvs").innerHTML =xxxxx

function al(a) {alert(a) ;}
//-->
</script>
</head>
<body>
<p>クリックしてください（<a href="#" onclick="c(1)">文字</a>、<a href="#" onclick="c(2)">表</a>、<a href="#" onclick="c(3)">ボタン</a>）</p>
<hr>
<div id="m">
<p>ここに表示します</p>
</div>
<hr>
</body>
</html>

ＨＴＭＬの書込み　　　戻る

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLを書き込む</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script>
<!--
function ini() {
  form.out.value = '<!DOCTYPE html>' + '\n' +
        '<html lang="ja">' + '\n' +
        '<head>' + '\n' +
        '<meta charset="UTF-8">' + '\n' +
        '<title></title>' + '\n' +
        '</head>' + '\n' +
        '<body>' + '\n' +
        '<p>zzzzzzzzzzz</p>' + '\n' +
        '</body>' + '\n' +
        '</html>' ;
}
function go() {
  var page = window.open("", "", "width=400,height=200") ;//新しいページを開く
  page.document.open();
  page.document.write(form.out.value) ;//HTMLを書き込む
  page.document.close();
}
// -->
</script>
</head>
<body onload="ini()"> 
<form name="form">
<p>テキストエリアのHTMLを実行する。</p>
<input type="button" value="実行" onclick="go()"><br>
<textarea name="out" rows="12" cols="30"></textarea>      
</form>   
</body>
</html>

｜JavaScript｜JavaScript/HTML｜ サイトマップ｜ホーム｜