タグ属性やスタイル属性をScriptで変更する

bodyタグには、文字色、背景色または背景画像、などを指定するタグ属性もあります。
例⇒<body text="文字色" bgcolor="背景色" background="背景画像">
そしてこれらの属性を変更する場合、documentのfgColorや bgColorに色の文字列を設定する表現が使えました。また背景画像は、 document.body.backgroundへのパスを変更することでできます。
この表現は昔から使われてきた古い表現で、その例を示します。この例はのクリックで確認できます。（小文字だけでなく 大文字を含めたキーワードであることに注目！すべてを小文字にすると動作しません）

<html><head><title>test</title>
<script type="text/javascript">
<!--
function btn_Click1(){
	document.bgColor="#FFFF99";
	document.fgColor="red";
}
// --></script>
</head>
<body bgcolor="#99FF99" text="blue">
背景色と文字色を変更する<br>
<input type="button" value="ボタン" onclick="btn_Click1()">
</body>
</html>

さて、上記は bodyのタグ属性で初期の色を指定して、それに対応するdocumentのbgColorやfgColorを使っていますが、 HTML4.01では好ましくないとされ、スタイルシートを使用するよう奨励されています。
そして、スタイルシートを使った場合は、タグ属性に対応するdocumentのbgColorやfgColorで背景色や文字色が変更できなくなってしまいました。（これは将来のブラウザで可能になるかもしれませんが、IE7やIE8ではできません。）
この状況はで確認できます。

←上記ソースの確認ボタンです。
つまりスタイルの属性を指定すると、 javascriptでタグ属性に対応する表現での変更ができなり、対応するためには、style属性で変更する表現が必要になるのです。それは次の表現です。
document.body.style.backgroundColor="背景色";
document.body.style.color="文字色";
これへの変更はで確認できます。

このように、スタイルの属性を指定すると javascriptでタグ属性でなく style属性で変更する表現が必要になります。画像の例をで確認できます。
これは、img { ～ } のスタイル指定行を削除するとこれまで通りで動作するでしょう。（確認しましょう）
ですが逆にスタイルの属性を指定しなくても、javascriptでstyle属性による変更は可能です。次のようなコードです。
document.body.img名.style.width="単位付き幅";
document.body.img名.style.height="単位付き高さ";
これへの変更はで確認できます。（マージの変更例も示しています）
つまり、始めからstyleを指定するjavascriptの表現で書いていればstyleを追加記述した時に動作しなくなる不具合を防ぐことができます。
（個人的に画像サイズは、srcと同じで飾りの属性というよりは、Webページで伝えたい情報そのものに属すると感じます。これが適切でないと見えないからです。それで飾りの指定のstyleでなく、タグ属性で指定する方も多いようです。そのため昔ながらのstyle属性を使わないサイズ変更プログラムも多く使われている状況です。）

さて前述例で、マージンを変更する例があります。　スタイルシートで
margin-left: 50px; の表現ですが、JavaScriptでは
document.N1.style.marginLeft="5px"; になっています。
JavaScriptでは、-の表現が、引き算の演算子になってしまうので、同じ表現が使えないためです。
それでほとんどのスタイル属性名で -を含むものは、 javaスクリプトで使う場合に、-を除いて続く単語の先頭文字を、大文字にする表現になっています。
下に body内のpadding、背景画像とその配置、画像と配置に関して、scriptで変更する例を示します。

<html><head>
<style type="text/css">
  body {
	padding-left: 20%;
	background-image: url('img/back1.gif');
	background-repeat: repeat-y;
  }
  img { vertical-align: middle; margin-top: 10px; }
</style>
<script type="text/javascript"><!-- 
  function btn_Click1(){
	document.body.style.paddingLeft="5%";
	document.body.style.backgroundImage="url('img/back2.gif')";
	document.body.style.backgroundRepeat="repeat-x";
	document.f1.style.marginTop="50px";
	document.f2.style.marginTop="50px";
  }
// --></script>
</head><body>
<img src="img/gA1.png" name="f1">と
<img src="img/gB1.png" name="f2">の２つあります。<br>
<input type="button"value="ボタン"onclick="btn_Click1()">
</body></html>

これはで確認できます。

このページは、ボタンクリックなどの確認すべき操作をすべて行わないと指示のページへのボタンが有効になりません。

タグ属性やスタイル属性をScriptで変更する chk_link();

タグ属性やスタイル属性をScriptで変更する