JS method to modify the image size: 1. Get the DOM object corresponding to the id through "document.getElementById('image id value')"; 2. Use the style and width attributes of the object to change the image size, the syntax is " Picture object.style.width='Picture size value'".
The operating environment of this tutorial: Windows 7 system, JavaScript version 1.8.5, Dell G3 computer.
How to modify the image size using JS
Note: The actual size of the image cannot be modified using js. It's just the width and height attributes corresponding to the image in the tag.
1. Obtain the DOM object corresponding to the id through var p = document.getElementById('image')2. Then use the style attribute of the object (The premise is that the image object has set the style attribute),
(Remember: this is a string, the format must be:???px, you cannot just write a number , otherwise the size of the image will not change on some browsers). The following code realizes that each time the button is clicked, the image can be enlarged or reduced:
The script defines two global variables to record the width and height of the image, because
The style.width or style.height attribute value is a string, so use new String(x) 'px' to input the attribute value. This technique is Make a record of this for easy review later. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><!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></pre><div class="contentsignin">Copy after login</div></div>For more programming-related knowledge, please visit:
The above is the detailed content of How to modify the size of pictures in JS. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
