您的位置：首页 > 运维架构 > 网站架构

submit按钮为什么会执行到网站换肤的代码，能不能解答一下我这个疑问

2017-04-05 15:04 483 查看

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JavaScript网页换肤</title>
        <link id="link1" rel="stylesheet" href="css/index2_1.css">
    </head>

    <body>
     <dl id="from">
         <form action="" class="from_verificationd">
             <dt>
                 <strong>可以换肤的提交框：</strong>
                    <input type="button" value="皮肤1" class="btn1" onClick="document.getElementById('link1').href='css/index2_1.css';">
                    <input type="button" value="皮肤2" class="btn2" onClick="document.getElementById('link1').href='css/index2_2.css';">
                </dt>
             <dd>姓名:<input type="text" class="username"></dd>
                <dd>密码:<input type="password" class="password"></dd>
                <dd>留言:<textarea class="message"></textarea></dd>
                <dd class="center"><input type="submit" value="提交" class="btn"></dd>
            </form>
        </dl>
    </body>
</html>

/*index2_1.css代码*/
@charset "utf-8";
/* CSS Document */
html{
font-size:87.5%;
}

body{
margin-top:2.85rem;
background:url(../img/bg1.jpg) no-repeat center;
}

dl{
width:32rem;
border:0.2rem #ccc solid;
background-color:#FFFFCC;
padding:1.43rem;
margin:0 auto;
filter: alpha(opacity: 70);
opacity:0.7;/*透明度为0.7*/
}
dt{
font-size:1.29rem;
color:#009933;
border-bottom:0.07px solid #ccc;
padding-left:1.4rem;
padding-bottom:1.4rem;
margin-bottom:1.43rem;
}
dd{
margin-left:0;
padding-bottom:1.4rem;
font-size:1rem;
padding-left:1.4rem;
}
.username{
width:21.42rem;
height:2.14rem;
line-height:2.14rem;

}
.password{
width:21.42rem;
height:2.14rem;
line-height:2.14rem;
}
.message{
width:21.54rem;
height:8.57rem;
line-height:8.57rem;
}
.center{
text-align:center;
}
.btn{
width:8.57rem;
height:2.86rem;
}

/*index2_2.css代码*/
@charset "utf-8";
/* CSS Document */
html{
font-size:87.5%;
}

body{
margin-top:2.85rem;
background:url(../img/bg2.jpg) no-repeat center;
}

dl{
width:32rem;
border:0.2rem #fff solid;
background-color:#7dabab;
padding:1.43rem;
margin:0 auto;
filter: alpha(opacity: 70);
opacity:0.7;/*透明度为0.7*/
}
dt{
font-size:1.29rem;
color:#fff;
border-bottom:0.07px solid #fff;
padding-left:1.4rem;
padding-bottom:1.4rem;
margin-bottom:1.43rem;
}
dd{
color:#fff;
margin-left:0;
padding-bottom:1.4rem;
font-size:1rem;
padding-left:1.4rem;
}
.username{
width:21.42rem;
height:2.14rem;
line-height:2.14rem;

}
.password{
width:21.42rem;
height:2.14rem;
line-height:2.14rem;
}
.message{
width:21.54rem;
height:8.57rem;
line-height:8.57rem;
}
.center{
text-align:center;
}
.btn{
width:8.57rem;
height:2.86rem;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： submit JavaScript 网站换肤解答疑问

相关文章推荐

新的分享

章节导航