您的位置：首页 > Web前端 > JavaScript

如何使用表单结合javascript改变网页图片的大小

2012-09-09 19:05 701 查看

测试结果是：一旦按了提交按钮，图片闪一下，接着就变回原来的大小了，这个为什么会这样的？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>images对象</title>

<script language="javascript1.2">

{

function image()

{

document.images[0].border = document.form1.border.value ;

document.images[0].width = document.form1.width.value ;

document.images[0].height = document.form1.height.value ;

// document.write(document.images[0].border+" "+document.images[0].width+" "+document.images[0].height);

}

}

</script>

</head>

<body>

<p><img src="2.jpg" alt="image图片" width="" height="" border="" name="myimg" /></p>

<form name="form1">

<p>

边框值<input type="text" name="border" size="5" />

宽度<input type="text" name="width" size="5" />

高度<input type="text" name="height" size="5" />

<input type="submit" value="提交" onclick="image()" />

<input type="reset" value="重置" />

</p>

</form>

</body>

</html>

原来问题所在：页面刷新了。

但为什么页面会刷新的：

因为你是在表单中，
<input type="submit" value="提交" onclick="image()" />
这个input的type又是submit。所以，执行完你预定的代码之后，表单被提交

如果想保持表单功能：
<input type="submit" value="提交" onclick="return image()" />
然后
function image(){

//尾部加上
return false;//可以使表单不被提交
}

当然，假如你按以上方法做了。那就表明你这个表单是不需要提交的。那么，你需要做的就是：
变理input的类型即可，其他地方不需要做任何改动：
<input type="button" value="提交" onclick="image()" />

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

标签：

相关文章推荐

新的分享

章节导航