Heim >Web-Frontend >js-Tutorial >So ändern Sie die Größe von Bildern in JS
So ändern Sie die Größe von Bildern in JS
- 醉折花枝作酒筹Original
- 2021-04-08 10:45:4311769Durchsuche
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'“.
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
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. 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. 🎜<!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='image' style="width: 400px; height: 200px;"
onMouseOut="changeImg('images/forest1.jpg')"
onMouseOver="changeImg('images/forest2.jpg')"
onClick="changeImg('images/forest3.jpg')"/>
<!-- 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('image');
i.src = src;
}
function bigger() {
var p = document.getElementById('image');
p.style.width=new String(x++)+'px';
p.style.height=new String(y++)+'px';
}
function smaller() {
var q = document.getElementById('image');
q.style.width=new String(x--)+'px';
q.style.height=new String(y--)+'px';
}
</script>
</body>
</html>🎜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!