zoukankan      html  css  js  c++  java
  • 如何使用表单结合javascript改变网页图片的大小

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

    <!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()" />

  • 相关阅读:
    第一轮铁大树洞APP开发冲刺(3)
    记一次寒假小尝试心得体会
    小学四则运算口算练习app---No.7
    小学四则运算口算练习app---No.6
    小学四则运算口算练习app---No.5
    小学四则运算口算练习app---No.4
    小学四则运算口算练习app---No.3
    小学四则运算口算练习app---No.2
    小学四则运算口算练习app
    《需求工程--软件建模与分析》读书笔记03
  • 原文地址:https://www.cnblogs.com/KeenLeung/p/2677763.html
Copyright © 2011-2022 走看看