-2

3つの異なるボタン（赤緑青）を押したときに動的に3つのDivタグを作成したい。赤を押したときに、「赤」のdivの高さを画面のサイズにして、ページ全体が赤く見えるようにします。緑を押すと、「赤」のdivの高さが画面の50％になり、画面の他の50％が他のdiv（緑）で占められるようにします。

そして最後に、青いボタンを押すと、すべてのdivが同じ高さで画面に表示されるようにします...

divを作成することはできますが、3つすべてのボタンを押した後に赤いボタンを押すと、以前に作成したdivを削除できません...

コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Ass 2</title>

        <script type="text/javascript">

        function fblue() {
            // document.bgColor = 'lightblue';

            selc=document.getElementById("first");
            divBlue=document.getElementById("one");
            myPara.removeChild(divBlue);



             selc=document.getElementById("first");

             divBlue=document.createElement("div");
             divBlue.id = "one";
             divBlue.style.backgroundColor = "lightblue";
             divBlue.style.height = "610px"
             divBlue.innerHTML = "dv tag created successfully";

             selc.appendChild(divBlue);
        }

        function fgreen() {

            selc=document.getElementById("first");
            divBlue=document.getElementById("one");


            divBlue.id = "one";
            divBlue.style.backgroundColor = "lightblue";
            divBlue.style.height = "305px"
            divBlue.innerHTML = "dv tag created successfully";
            selc.appendChild(divBlue);

            divGreen=document.createElement("div");
            divGreen.id = "one";
            divGreen.style.backgroundColor = "lightgreen";
            divGreen.style.height = "305px"
            divGreen.innerHTML = "dv tag created successfully";
            selc.appendChild(divGreen);

            //document.bgColor = ''; 
        }

        function fred() {

            document.getElementById("one").style.backgroundColor = 'lightblue';
            document.getElementById("one").style.width = '1104px';
            document.getElementById("one").style.height = '185px';

            document.getElementById("two").style.backgroundColor = 'red';
            document.getElementById("two").style.width = '1104px';
            document.getElementById("two").style.height = '185px';

            document.getElementById("three").style.backgroundColor = 'lightgreen';
            document.getElementById("three").style.width = '1104px';
            document.getElementById("three").style.height = '185px';
            document.bgColor = ''; 
        }

        </script>
    </head>
    <body style="margin: 0px;">
        <div style="height: 0px;" id="first"></div>

        <div id="four" style="margin-left: 415px; margin-top: 500px">
            <form>
                <input type="button" name="blu" value="Blue" onclick="javascript:fblue();">
                <input type="button" name="gre" value="Green/Red" onclick="javascript:fgreen();">
                <input type="button" name="re" value="Red/Green/Blue" onclick="javascript:fred();">
            </form>
        </div>
    </body>
</html>
4

1 に答える 1

4 
  document.createElement("div");

動的にdivを作成します

var oldChild = element.removeChild(child);
element.removeChild(child);

DOMから子ノードを削除します。削除されたノードを返します。

于 2012-11-10T09:09:04.077 に答える