So ändern Sie die Größe von Bildern in JS-js-Tutorial-php.cn

So ändern Sie die Bildgröße in JS: 1. Rufen Sie das der ID entsprechende DOM-Objekt über „document.getElementById(‘image id value‘)“ ab. 2. Verwenden Sie die Stil- und Breitenattribute des Objekts, um das Bild zu ändern Größe, die Syntax lautet „image object.style .width='image size value'“.

So ändern Sie die Größe von Bildern in JS

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

So ändern Sie die Bildgröße mit JS

Hinweis: Die tatsächliche Größe des Bildes kann nicht mit js geändert werden. Es werden nur die Breiten- und Höhenattribute geändert, die dem Bild im Tag entsprechen.

1. Erhalten Sie das DOM-Objekt, das der ID entspricht, über var p = document.getElementById('image') var p = document.getElementById('image')获取到对应id的DOM对象

2、再使用对象的style属性(前提是image对象已经设置过style属性)，p.style.width='200px'(切记：此处是字符串，格式一定是：???px,不能只写个数字，否则在有的浏览器上图片的大小是不会改变的)。

以下代码实现了每次点击按钮可以实现图片变大或缩小一点：

脚本中定义了两个全局变量用来记录图片的宽和高，因为style.width或style.height属性值是字符串，所以用new String(x++)+'px

2. Verwenden Sie dann das Stilattribut des Objekts (vorausgesetzt, das Bildobjekt wurde mit dem style-Attribut festgelegt), p.style.width='200px' (Denken Sie daran: Dies ist eine Zeichenfolge, das Format muss sein:???px, sonst können Sie nicht einfach eine Zahl schreiben Bei einigen Browsern funktioniert es nicht. Die Größe des Bildes ändert sich nicht.

Der folgende Code erkennt, dass das Bild bei jedem Klick auf die Schaltfläche vergrößert oder verkleinert werden kann:

Zwei globale Variablen werden im Skript definiert, um die Breite und Höhe des Bildes aufzuzeichnen, denn style.width oder Der Attributwert <code>style.height ist eine Zeichenfolge. Verwenden Sie daher new String(x++)+'px', um den Attributwert einzugeben. Diese Technik wird hier aufgezeichnet . , um es später einfacher ansehen zu können. 🎜

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图像交换</title>
<style type="text/css">
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("images/bg2.jpg");
    }
  #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;
    }
 </style>
 <script type="text/javascript" src="changeimg.js">
 </script>
 </head>
 <body>
       <p id="father">
    <p id="header">
    <h1 class="title">    软件开发基础-实验</h1></p><p id="daohang">
    <a href="../test1/test1-index.html" class="one">实验一</a>
    <a href="../test2/test2-html.html" class="two">实验二</a>
    <a href="../test3/test3-jsimg.html" class="three">实验三</a>
    <a href="" class="four">实验四</a>
    <a href="" class="five">实验五</a>
    <a href="" class="six">实验六</a>
    <a href="" class="seven">实验七</a>
    <a href="" class="eight">实验八</a></p><p id="left">
    <ul>
        <li id="apply">JS应用</li>
        <li id="formathtml"><a href="test3-jsimg.html">图像交换</a></li>
        <li id="formatfont"><a href="test3-jsmin.html">网页秒表</a></li>
        <li id="formattable"><a href="test3-jstable.html">表格编辑</a></li>
    </ul>
    </p>
    <p id="right">
        <br/>
        <h2>图像交换</h2>
        <br/>
        <img src="images/forest1.jpg" id=&#39;image&#39; style="width: 400px; height: 200px;"
         onMouseOut="changeImg(&#39;images/forest1.jpg&#39;)"
         onMouseOver="changeImg(&#39;images/forest2.jpg&#39;)"
         onClick="changeImg(&#39;images/forest3.jpg&#39;)"/>
         <!-- onMouseOut鼠标移出指定对象时的效果 -->
         <!-- onMouseOver鼠标移动到指定对象上的效果 -->
         <!-- onClick鼠标完成一次点击（按下&松开）的效果 -->
         <!-- onMouseDown鼠标完成按下的瞬间产生的效果 -->
         <!-- onMouseUp鼠标完成松开的瞬间产生的效果 -->
        <br/>
         
        <input type="button" value="增大" onclick="bigger()"/>
        <input type="button" value="增小" onclick="smaller()"/>
    </p>
    <p id="footer">
        <p>2015-2016-1学期 软件工程
        </p>
     </p>
     </p>
     <script type="text/javascript">
     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;;
        }
        </script>
    </body>
</html>

Nach dem Login kopieren

🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonSo ändern Sie die Größe von Bildern in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!