JavaScriptを使用したHTMLページの画像を拡大する

Question

JavaScriptを使用してHTMLページの画像を拡大しようとしています。 HTMLソースコードの画像は、常に高さ/幅100ピクセルです。画像をクリックすると、画像が元のサイズで表示されます。 イメージを再度クリックすると、イメージが高さ/幅100ピクセルで表示されます。 HTMLソースコード内

例の画像：

<img src="image.jpg" onClick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100"> 

マイJavaScriptのソースコード：

function swap(img) 
{ 
    if (img.width==="100") 
    { 
    img.width="auto"; 
    img.height="100%"; 
    } 
    else 
    { 
    img.width="100"; 
    img.height="100"; 
    } 
} 

私の問題は、変更しない画像サイズの用量です。私は間違って何をしていますか？ 誰かがより良いアイデアを持っていますか？

Answer 1

は、あなたのイメージはすでにCSSクラスを持っていないあなたがすることができます提供フルサイズのクラスを簡単に交換できます。

function swap(img) { 
 
    if (img.className !== "full-size") img.className = "full-size"; 
 
    else img.className = ""; 
 
}

.full-size { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<img src="https://multimedia.journalism.berkeley.edu/wp-content/uploads/2014/09/css101-main.jpg" onClick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100">

あなたはしかし、単一のHTML要素に複数のクラスを処理するためにjQueryを使用したほうが良いと思います。

Answer 2

image.widthを使用するのはベストプラクティスではなく、非常に長い間行われています。

あなたがしなければならないことは、HTMLとJavaScriptの両方で「スタイル」プロパティを使用することです。それ以外に、あなたは常にユニットを定義する必要があります。ピクセル（px）、パーセント（％）。

だからあなたのイメージは、この（私はイベントを無視する）のようなものになります。

<img style="cursor: pointer; width: 100%, height: 100%;"> 

をあなたは100pxにまたは100％を望んでいた場合、私は理解していなかったので、必要に応じて変更します。

あなたのJSは、次のようになります。

function swap(img) 
{ 
    if (img.style.width==="100%") 
    { 
    img.style.width="auto"; 
    img.style.height="100%"; 
    } 
    else 
    { 
    img.style.width="100%"; 
    img.style.height="100%"; 
    } 
} 

Answer 3

あなたの実際のコード：コードで

コメントで述べたような問題は、厳格なcomparaisonあなたはstringを比較してましたnumberであり、img.widthがnumberであり、"100"がstringであるためです。

function swap(img) { 
 
    if (img.width === 100) { 
 
    img.width = "auto"; 
 
    img.height = "100%"; 
 
    } else { 
 
    img.width = "100"; 
 
    img.height = "100"; 
 
    } 
 
}

<img src="image.jpg" onClick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100">

代替：

だから、あなただけの== comparaisonまたはその代わり"100"のちょうど100のいずれかを使用してBYU、comparaisonを変更する必要があり、それを修正するには

• Javascriptで実際にアクセスする同じようheightとwidthを使用し、それ以外の場合は

function swap(img) { 
 
    if (img.getAttribute("width") === "100") { 
 
    img.width = "auto"; 
 
    img.height = "100%"; 
 
    } else { 
 
    img.width = "100"; 
 
    img.height = "100"; 
 
    } 
 
}

<img src="image.jpg" onclick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100">

• ：あなたはより良いelement.getAttribute() methodを使用する要素の属性（幅または 高さ）は、この はあなたのコードがどうあるべきかでありますプロパティを 要素のスタイルで入力し、element.style.heightを使用してアクセスします。

さらに読書：さらにあなたはここで、要素の属性とスタイルのプロパティheight/width間diffirenceを見ることができます読み出すため

：要素の

Should I specify height and width attributes for my IMGs in HTML?

Answer 4

使用styleプロパティstyleを適用します。条件のためだけに.widthプロパティを使用してください。

function swap(img) { 
 
    if (img.width === 100) { 
 
    //Remove the quotes around `100` as you are using strict comparison 
 
    img.width = "auto"; 
 
    img.style.width = "auto"; 
 
    img.style.height = "100%"; 
 
    } else { 
 
    img.width = "100"; 
 
    img.style.width = ""; 
 
    img.style.height = ""; 
 
    } 
 
}

<img src="http://www.mariodemiranda.com/uploads/showcase/4_pic_indian-art-4.jpg" onClick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100">

編集： CSS class、.contains、.add/.removeを使用すると便利になります。

function swap(img) { 
 
    img.classList.contains('fs') ? img.classList.remove('fs') : img.classList.add('fs') 
 
}

.fs { 
 
    width: auto; 
 
    height: 100%; 
 
}

<img src="http://www.mariodemiranda.com/uploads/showcase/4_pic_indian-art-4.jpg" onClick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100">

Answer 5

Fiddle Link

<img src="https://c7.staticflickr.com/3/2538/3742771246_2648fa4e6e_b.jpg" onClick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100"> 
<script> 
    function swap(img) 
    { 
debugger; 
if (img.width===100) 
{ 
img.style.height = 'auto'; 
img.style.width = 'auto'; 
} 
else 
{ 
    img.style.height = '100px'; 
img.style.width = '100px'; 
} 
}</script> 

Answer 6

私は、クリックが発生したときに応じてこれを行うには、CSSを使用して、要素クラスを変更することを好むだろう。

スクリプト：

function swap(img) { 
    if (img.classList.contains('fullsize')) { 
    img.classList.remove('fullsize'); 
    } else { 
    img.classList.add('fullsize'); 
    } 
} 

要素：

<img src="image.jpg" onclick="swap(this)" class="resize-image" style="cursor: pointer;"> 

CSS：

.resize-image { 
    width: 100px; 
    height: 100px; 
} 

.resize-image.fullsize { 
    width: auto; 
    height: 100%; 
} 

// Or if using SASS etc 

.resize-image { 
    width: 100px; 
    height: 100px; 

    &.fullsize { 
    width: auto; 
    height: 100%; 
    } 
} 

Answer 7

function swap(img) 
{ 
debugger 
    if (img.style.width==="100px") 
    { 
    img.style.width="auto"; 
    img.style.height="100%"; 
    } 
    else 
    { 
    img.style.width="100px"; 
    img.style.height="100px"; 
    } 
}