『JavaScript学習ノート三』if else及びfunctionの使用

17048 ワード

JavaScript html 関数 if

『JavaScript学習ノート3』:if else
if elseの使用
JavaScriptの中でif elseの使用は他の言語で使う方法と同じです.例えば、私達はこのような機能を実現したいです.ボタンをクリックした時、divが表示されたら隠します.そうでなければ表示されます.
簡単なので、コードは以下の通りです.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>     </title>
    </head>
    <style> #div1 {width:200px;height:100px;background:red;border:1px solid:#999;display:none} </style>
    <script> function moreContent() { var oDiv = document.getElementById('div1'); //          ，    ，    。 if(oDiv.style.display=="block") { oDiv.style.display="none"; } else { oDiv.style.display="block"; } } </script>
    <body>
    <input type="button" value="  " onclick="moreContent()" />

    <div id="div1">
            
    </div>
    </body>
    </html>

スタイルを変更
上記の例の手順は属性の値を変えるだけです.次は異なる属性の値を変更する関数を試してみます.
今はこのような機能を実現したいです.
ボタンが三つあります.一つのボタンはdivの幅を変えます.一つのボタンはdivの長さを変えます.一つのボタンはdivの色を変えます.どうやって実現しますか?
この機能は比較的簡単です.このように実現することができます.直接ラベルにコードを書きます.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>     </title>
    </head>

    <style> #div1 {width:200px;height:100px;border:1px solid:#999;background:red;display:block;} </style>


    <body>
    <input type="button" value="    " onclick="document.getElementById('div1').style.width='400px';" />  <!--           width/height          -->
    <input type="button" value="    " onclick="document.getElementById('div1').style.height='300px';"/>
    <input type="button" value="    " onclick="document.getElementById('div1').style.background='black';"/>
    <div id="div1">

    </div>
    </body>
    </html>

3つの関数を選択して作成することもできます.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>     </title>
    </head>

    <style> #div1 {width:200px;height:100px;border:1px solid:#999;background:red;display:block;} </style>
    <script> function changeWidth(content) { var oDiv=document.getElementById('div1'); oDiv.style.width=content; } function changeHeight(content) { var oDiv=document.getElementById('div1'); oDiv.style.height=content; } function changeColor(content) { var oDiv=document.getElementById('div1'); oDiv.style.background=content; } </script>

    <body>
    <input type="button" value="    " onclick="changeWidth('400px')" /> 
    <input type="button" value="    " onclick="changeHeight('300px')"/>
    <input type="button" value="    " onclick="changeColor('black')"/>
    <div id="div1">

    </div>
    </body>
    </html>

あなたも関数を書いて完成できます.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>     </title>
    </head>

    <style> #div1 {width:200px;height:100px;border:1px solid:#999;background:red;display:block;} </style>
    <script> function setStyle(name,value) { var oDiv = document.getElementById("div1"); //oDiv.style[name]=value;//  ：       oDiv.style.name=value; } </script>

    <body>
    <input type="button" value="    " onclick="setStyle('width','400px')" />     <!--   ：             -->
    <input type="button" value="    " onclick="setStyle('height','300px')"/>
    <input type="button" value="    " onclick="setStyle('background','black')"/>
    <div id="div1">

    </div>
    </body>
    </html>

結び目
最近JavaScriptを勉強していますが、この3編の「JavaScript学習ノート3」に挙げられている例はどれも簡単です.主にトレーナーとして使われています.JavaScriptを熟知しています.これからもっと多くのことを勉強し続けます.

JavaScript原型オブジェクト(一)