form里button没有定义type的提交问题

今天学皮肤切换的问题。自己做了个小练习，实现body的背景色切换。通过 JS改变link的href。

 

首先是html

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link id="link" href="css1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form>
<button  onclick="document.getElementById('link').href='css1.css';">皮肤1</button>
<button  onclick="document.getElementById('link').href='css2.css';">皮肤2</button>
<input type="button" onclick="document.getElementById('link').href='css1.css';" value="1" />
<input type="button" onclick="document.getElementById('link').href='css2.css';" value="2" />
</form>
</body>

 

然后两个css文件

css1.css

body { background:red;}

 

css2.css

body { background:green;}

 

 

出现一个问题：

四个按钮，1、2可以实现red green切换，但是皮肤2实现不了。点击皮肤2，页面刷新，但是不green。

我怀疑是button的问题。难道form里不能用button，只能用input？没听说过呀！！！

 

把html代码改为

<head>
<title>无标题文档</title>
<link id="link" href="css1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button  onclick="document.getElementById('link').href='css1.css';">皮肤1</button>
<button  onclick="document.getElementById('link').href='css2.css';">皮肤2</button>
<input type="button" onclick="document.getElementById('link').href='css1.css';" value="1" />
<input type="button" onclick="document.getElementById('link').href='css2.css';" value="2" />
</body>
</html>

 

没有问题，是想要的效果：

 

所以：问题不是button就是form！

 

 

百度了一下“form里能用button吗”，在csdn http://bbs.csdn.net/topics/390307663，有个帖子

有网友说

注意了：<button>测试</button>没有指定type在firefox默认是提交按钮。

 

html代码改为：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link id="link" href="css1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form>
<button type="button" onclick="document.getElementById('link').href='css1.css';">皮肤1</button>
<button type="button" onclick="document.getElementById('link').href='css2.css';">皮肤2</button>
<input type="button" onclick="document.getElementById('link').href='css1.css';" value="1" />
<input type="button" onclick="document.getElementById('link').href='css2.css';" value="2" />
</form>
</body>
</html>

 

问题解决！

皮肤2可以切换了，在IE、FF都没有问题。

 

posted @ 2014-02-14 11:36  fjenny_贞  阅读(371)  评论(0)    收藏  举报