如何使用JavaScript修改圖片的大小的範例程式碼-js教程-PHP中文網

首頁

web前端

js教程

如何使用JavaScript修改圖片的大小的範例程式碼

Jul 26, 2017 pm 01:50 PM

javascript js 圖片

註：利用js是不能修改圖片的實際大小的，修改的只是圖片在標籤中對應的width,height屬性。

1.透過var p = document.getElementById('image')取得對應id的DOM物件

2.再使用物件的style屬性(前提是image物件已經設定過style屬性)，p.style.width='200px'(切記：此處是字串，格式一定是：???px,不能只寫個數字，否則在有的瀏覽器上圖片的大小是不會改變的)

以下程式碼實現了每次點擊按鈕可以實現圖片變大或縮小一點：

我在腳本中定義了兩個全域變數用來記錄圖片的寬和高，因為style.width或style.height屬性值是字串，所以用new String(x++)+'px'的方式來實現屬性值的輸入，這個技巧在此做一個記錄，便於以後查看.

&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
&lt;title&gt;图像交换&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;html, body, p, span, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, address, big, cite, code, del, 
em, img, ins, small, strong, var, b, u, i, center, dl,
dt, dd, ol, ul, li, fieldset, form, label, legend,iframe {
  margin:0px; 
  padding:0px;
  /*
  用来取消一些标签默认的margin和padding  */}body{
    text-align: center;}#father{
    position:relative;
    margin:auto;
    width: 800px;
    height:600px;
    border-style: solid;}#header{
    height:100px;
    width: 800px;
    background-image: url(&quot;images/bg2.jpg&quot;);}#daohang{
    height:30px;
    width:800px;
    background-color: #99FFFF;}#left{
    width:180px;
    height:440px;
    background-color: #F0FFFF;}#right{
    position: absolute;
    top:130px;
    left:180px;
    height:440px;
    width:620px;
    text-align: left;}#footer{
    position:absolute;
    top:570px;
    height:30px;
    width: 800px;
    background-color: #99FFFF;}#header h1{
    height: 3em;
    line-height: 3em;
    overflow: hidden;
    letter-spacing: 5px;}a{
    height: 2em;
    line-height: 2em;
    overflow: hidden;
    text-decoration: none;}p{
    height: 2em;
    line-height: 2em;
    overflow: hidden;}ul{
    list-style-type:none;}li{
    padding: 10px;}#apply{
    font-size: 30px;
    font-weight: bold;}.ftcss{
    font-family: 宋体,sans-serif;
    font-size:12pt;
    color:#0011aa;
    text-align: left;
    text-indent: 2em;
    line-height: 1.8;}.bold{
    font-weight: 600;}.italic{
    font-style: italic;}.underline{
    text-decoration: underline;}&lt;/style&gt;&lt;script type=&quot;text/javascript&quot; src=&quot;changeimg.js&quot;&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;p id=&quot;father&quot;&gt;
    &lt;p id=&quot;header&quot;&gt;
    &lt;h1 class=&quot;title&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;软件开发基础-实验&lt;/h1&gt;&lt;/p&gt;&lt;p id=&quot;daohang&quot;&gt;
    &lt;a href=&quot;../test1/test1-index.html&quot; class=&quot;one&quot;&gt;实验一&lt;/a&gt;
    &lt;a href=&quot;../test2/test2-html.html&quot; class=&quot;two&quot;&gt;实验二&lt;/a&gt;
    &lt;a href=&quot;../test3/test3-jsimg.html&quot; class=&quot;three&quot;&gt;实验三&lt;/a&gt;
    &lt;a href=&quot;&quot; class=&quot;four&quot;&gt;实验四&lt;/a&gt;
    &lt;a href=&quot;&quot; class=&quot;five&quot;&gt;实验五&lt;/a&gt;
    &lt;a href=&quot;&quot; class=&quot;six&quot;&gt;实验六&lt;/a&gt;
    &lt;a href=&quot;&quot; class=&quot;seven&quot;&gt;实验七&lt;/a&gt;
    &lt;a href=&quot;&quot; class=&quot;eight&quot;&gt;实验八&lt;/a&gt;&lt;/p&gt;&lt;p id=&quot;left&quot;&gt;
    &lt;ul&gt;
        &lt;li id=&quot;apply&quot;&gt;JS应用&lt;/li&gt;
        &lt;li id=&quot;formathtml&quot;&gt;&lt;a href=&quot;test3-jsimg.html&quot;&gt;图像交换&lt;/a&gt;&lt;/li&gt;
        &lt;li id=&quot;formatfont&quot;&gt;&lt;a href=&quot;test3-jsmin.html&quot;&gt;网页秒表&lt;/a&gt;&lt;/li&gt;
        &lt;li id=&quot;formattable&quot;&gt;&lt;a href=&quot;test3-jstable.html&quot;&gt;表格编辑&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;&lt;/p&gt;&lt;p id=&quot;right&quot;&gt;
    &lt;br/&gt;
    &lt;h2&gt;图像交换&lt;/h2&gt;
    &lt;br/&gt;
    &lt;img src=&quot;images/forest1.jpg&quot; id=&#39;image&#39; style=&quot;width: 400px; height: 200px;&quot; 
     onMouseOut=&quot;changeImg(&#39;images/forest1.jpg&#39;)&quot;
     onMouseOver=&quot;changeImg(&#39;images/forest2.jpg&#39;)&quot; 
     onClick=&quot;changeImg(&#39;images/forest3.jpg&#39;)&quot;/&gt;
     &lt;!-- onMouseOut鼠标移出指定对象时的效果 --&gt;
     &lt;!-- onMouseOver鼠标移动到指定对象上的效果 --&gt;
     &lt;!-- onClick鼠标完成一次点击（按下&amp;松开）的效果 --&gt;
     &lt;!-- onMouseDown鼠标完成按下的瞬间产生的效果 --&gt;
     &lt;!-- onMouseUp鼠标完成松开的瞬间产生的效果 --&gt;
    &lt;br/&gt;
    
    &lt;input type=&quot;button&quot; value=&quot;增大&quot; onclick=&quot;bigger()&quot;/&gt;
    &lt;input type=&quot;button&quot; value=&quot;增小&quot; onclick=&quot;smaller()&quot;/&gt;
        &lt;/p&gt;&lt;p id=&quot;footer&quot;&gt;
    &lt;p&gt;2015-2016-1学期&amp;nbsp;软件工程&lt;/p&gt;
    &lt;/p&gt;
    &lt;/p&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;var x=400;var y=200;function changeImg() {    
    var i = document.getElementById(&#39;image&#39;);
    i.src = src;
}function bigger() {    var p = document.getElementById(&#39;image&#39;);
    p.style.width=new String(x++)+&#39;px&#39;;
    p.style.height=new String(y++)+&#39;px&#39;;
    
}function smaller() {    var q = document.getElementById(&#39;image&#39;);
    q.style.width=new String(x--)+&#39;px&#39;;
    q.style.height=new String(y--)+&#39;px&#39;;
}&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;

登入後複製

以上是如何使用JavaScript修改圖片的大小的範例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn