submit引起的问题

来源：互联网发布：化妆品淘宝店铺起名编辑：程序博客网时间：2024/05/01 13:08

今天在做一个小例子的过程中发现了一个问题：
submit按钮会清空JS写的样式？

html/css 部分：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style type="text/css">        body,h1{margin:0;padding:0;}            .demo{                width:900px;                height:600px;                position:relative;            }            a{                text-decoration: none;            }            h1{                position:absolute;                width:400px;                height:32px;                font-size:28px;                left:5px;                top:10px;            }            .click{                position:absolute;                height:32px;                background:red;                color:white;                font-weight:bold;                border:none;                left:330px;                top:10px;            }            .demo .example{                width:100px;                height:100px;                border:3px solid #000;                position:absolute;                left:5px;                top:62px;                display: none;            }            .demo .setting{                width:400px;                height:300px;                border:10px solid grey;                position: absolute;                right:30px;                bottom:30px;                display:none;            }            .setting p a{                padding:0px 10px;                border:1px solid #808080;               }            .setting .red{background: yellow;}            .setting .yellow{background: blue;}            .setting .blue{background: red;}        </style>    </head>    <body>        <div class="demo">            <h1>请为下面的DIV设置样式：</h1>            <input type="button" id="click" value="点击设置" class="click"/>            <div id="example" class="example"></div>            <div class="setting" id="setting">                <p>请选择背景：                    <a href="#" id="red" class="red">红</a>                    <a href="#" id="yellow" class="yellow">黄</a>                    <a href="#" id="blue" class="blue">蓝</a>                </p>                <p>请选择宽(px)：                    <a id="wid1" href="#">200</a>                    <a id="wid2" href="#">300</a>                    <a id="wid3" href="#">400</a>                </p>                <p>请选择高(px)：                    <a id="heg1" href="#">200</a>                    <a id="heg2" href="#">300</a>                    <a id="heg3" href="#">400</a>                </p>                <form>                    <input id="Btn1" type="button" value="恢复" />                    <input id="Btn2" type="button" value="确定" />                </form>            </div>        </div>    </body></html>

JS代码部分：

    window.onload = function (){        var oBtn1 = document.getElementById('Btn1');        var Red = document.getElementById('red');        var Yellow = document.getElementById('yellow');        var Blue = document.getElementById('blue');        var oWid1 = document.getElementById('wid1');        var oWid2= document.getElementById('wid2');        var oWid3 = document.getElementById('wid3');        var oHeg1 = document.getElementById('heg1');        var oHeg2 = document.getElementById('heg2');        var oHeg3 = document.getElementById('heg3');        var oBtn1 = document.getElementById('Btn1');        var oBtn2 = document.getElementById('Btn2');        var oClick = document.getElementById('click');        var Setting = document.getElementById('setting');            //触摸事件            Red.onmouseover = function (){                red.style.background = 'red';            };            Yellow.onmouseover = function (){                yellow.style.background = 'yellow';            };            Blue.onmouseover = function (){                blue.style.background = 'blue';            };            Red.onmouseout = function (){                red.style.background = 'yellow';            };            Yellow.onmouseout = function (){                yellow.style.background = 'blue';            };            Blue.onmouseout = function (){                blue.style.background = 'red';            };            //点击事件            oClick.onclick = function (){                example.style.display = 'block';                Setting.style.display = 'block';            };            Red.onclick = function (){                example.style.background = 'red';                };            Yellow.onclick = function (){                example.style.background = 'yellow';                };            Blue.onclick = function (){                example.style.background = 'blue';                };            oWid1.onclick = function (){                example.style.width = '200px';                };              oWid2.onclick = function (){                example.style.width = '300px';                };              oWid3.onclick = function (){                example.style.width = '400px';                };              oHeg1.onclick = function (){                example.style.height = '200px';                };            oHeg2.onclick = function (){                example.style.height = '300px';                };            oHeg3.onclick = function (){                example.style.height = '400px';                };            oBtn1.onclick = function (){                example.style.background = 'none';                example.style.width = '100px';                example.style.height = '100px';                };            oBtn2.onclick = function (){                Setting.style.display = 'none';            };        };

例子效果图如下：

点击上方的‘点击设置’，会弹出设置框，通过设置可以预览框点块元素样式，最后点击‘确定’按钮，设置框会隐藏，如果点击‘恢复’按钮，页面左边的DEMO块元素会回复初始状态。

那么问题来了~~
现在例子中设置框中的‘确定’按钮，用的是button按钮，如果改成submit按钮，则会出现这样的情况：
1、注释掉 ‘确定’ 按钮的JS代码，点击后清空DEMO块的样式。
2、不注释掉任何JS代码，选择了DEMO样式后，点击 ‘确定’ 按钮，依然清空DEMO块样式。

我的解决办法：
1、将submit改成button来实现确定提交功能；
2、两个 input标签不用form表单包，改成div包，都能解决这个问题。

从解决办法得出的个人结论：
submit和button的区别就在于一个具有提交作用，一个没有。而form表单又是联系后台服务器进行数据提交的，那么是不是可以理解成submit提交后清空了样式。

最后几句：作为一个前端刚入门的小菜菜，很多知识点都没有彻底的了解，如果以后有了更加深入的理解，再回来更新它。

0 0