WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:JavaScriptによるcssの設定法

0:[投稿] cozy [2002/08/07 16:50 ][環境:WIN+IE わからない]

よろしくお願いします。
今、ラジオボタンのチェックと同フォームのサブミットボタンのクリックによって、
そのhtmlに対して動作するcssを設定するスクリプトを書いています。
以下のソースを参照してください。

<html>
<title>フォームとjavascript</title>
<head>
<script>
function cchange(){
    if(document.form1.color[0].checked==true){
        document.write("<style type='text/css'>");
        document.write("body {background:blue;}");
        document.write("</style>");
        location.reload();
    }
    if(document.form1.color[1].checked==true){
        document.write("<style type='text/css'>");
        document.write("body {background:green;}");
        document.write("</style>");
        location.reload();
    }
}
</SCRIPT>
</head>
<body>
<form name="form1">
<input type="radio" name="color" value="b">青
<input type="radio" name="color" value="g">緑
<input type="button" value="色変え!" onClick="cchange()">
</form>
テスト
</body>
</html>

この方法だと、cssの設定と同時にリロードしないとcssが動作しないのですが、
リロード後、フォームが画面に表示されなくなってしまい、再設定が出来ません。
ちゃんと表示されるようにするにはどうしたらいいでしょう。
また、リロードしなくてもcssの効果を得られるようにする方法はあるでしょうか。

よろしければ、教えてください。お願いします。


1:[回答] 謎の素浪人 [2002/08/07 17:44 ]

こんな感じとか。

<head>
<script type="text/javascript">
function cchange() {

    for (var i=0, color, elms=document.form1.elements; i<elms.length; i++)
        if (elms[i].checked) color = elms[i].value;

    document.body.style.color = color;

}
</script>
</head>
<body>

<form name="form1">
    <input type="radio" name="color" value="blue" checked>青
    <input type="radio" name="color" value="green">緑
    <input type="button" value="色変え!" onClick="cchange()">
</form>
<p>テスト</p>

</body>


2:[回答] cozy [2002/08/08 01:47 ]

謎の侍さん、回答ありがとうございました。
ですが、私の環境が悪いのでしょうか、ボタンをクリックしても
何も変化がおこりません。
どういうことでしょう。

御本人、もしくはその他の興味を持たれた方、よければ御指導ください。


3:[回答] yuu [MAIL] [URL] [2002/08/08 02:17 ]

背景色を変えたいんだから
document.body.style.backgroundColor = color;
では?


4:[回答] 謎の素浪人 [2002/08/08 11:55 ]

>> 2
>> 3
間違えました。
yuu さんの指摘どおり直してください。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World