Heim > Artikel > Web-Frontend > Beispielcode für die Verwendung von JavaScript zum Ändern der Größe eines Bildes

Beispielcode für die Verwendung von JavaScript zum Ändern der Größe eines Bildes

黄舟Original: 2017-07-26 13:50:231796Durchsuche

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')

2. Verwenden Sie dann das Stilattribut des Objekts (vorausgesetzt, das Bildobjekt hat das style-Attribut festgelegt), p.style.width='200px' (Denken Sie daran: Dies ist eine Zeichenfolge, das Format muss sein:???px, Sie können nicht einfach eine Zahl schreiben, sonst ändert sich die Größe des Bildes nicht einige Browser)

Mit dem folgenden Code kann das Bild bei jedem Klick auf die Schaltfläche vergrößert oder verkleinert werden:

Ich habe im Skript zwei globale Variablen definiert, um die Breite und Höhe des Bildes aufzuzeichnen . Da der Attributwert „style.width“ oder „style.height“ ein String ist, wird zur Eingabe des Attributwerts „new String(x++)+'px‘ verwendet. Diese Technik wird hier zur späteren einfacheren Anzeige aufgezeichnet.

<!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>

Das obige ist der detaillierte Inhalt vonBeispielcode für die Verwendung von JavaScript zum Ändern der Größe eines Bildes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Zusammenfassung der wichtigsten Punkte, auf die bei praktischen Anwendungen von JavaScript geachtet werden mussNächster Artikel：Zusammenfassung der wichtigsten Punkte, auf die bei praktischen Anwendungen von JavaScript geachtet werden muss

In Verbindung stehende Artikel

Mehr sehen