submit引起的问题

最新推荐文章于 2021-08-18 13:12:14 发布

SNP_fuyun

最新推荐文章于 2021-08-18 13:12:14 发布

阅读量461

点赞数

分类专栏：日常作业修BUG记录文章标签： html css submit form

本文链接：https://blog.csdn.net/SNP_fuyun/article/details/53494876

版权

日常作业修BUG记录专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天在做一个小例子的过程中发现了一个问题：
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提交后清空了样式。

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

SNP_fuyun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
submit引起的问题

今天在做一个小例子的过程中发现了一个问题： submit按钮会清空JS写的样式？html/css 部分：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body,h1{margin:0;
复制链接

扫一扫