中條 美冬

1642849620

JavaScriptを使用して画像サイズを増減する方法

ズームインやズームアウト機能のように、幅または高さのJavaScriptプロパティを使用して、画像のサイズを比例的に増減できます。

次の例を見て、基本的にどのように機能するかを理解しましょう。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Increasing and Decreasing Image Size</title>
<script>
    function zoomin(){
        var myImg = document.getElementById("sky");
        var currWidth = myImg.clientWidth;
        if(currWidth == 500){
            alert("Maximum zoom-in level reached.");
        } else{
            myImg.style.width = (currWidth + 50) + "px";
        } 
    }
    function zoomout(){
        var myImg = document.getElementById("sky");
        var currWidth = myImg.clientWidth;
        if(currWidth == 50){
            alert("Maximum zoom-out level reached.");
        } else{
            myImg.style.width = (currWidth - 50) + "px";
        }
    }
</script>
</head>
<body>
    <p>
        <button type="button" onclick="zoomin()">Zoom In</button>
        <button type="button" onclick="zoomout()">Zoom Out</button>
    </p>
    <img src="sky.jpg" id="sky" width="250" alt="Cloudy Sky">
</body>
</html>

What is GEEK

Buddha Community

中條 美冬

1642849620

JavaScriptを使用して画像サイズを増減する方法

ズームインやズームアウト機能のように、幅または高さのJavaScriptプロパティを使用して、画像のサイズを比例的に増減できます。

次の例を見て、基本的にどのように機能するかを理解しましょう。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Increasing and Decreasing Image Size</title>
<script>
    function zoomin(){
        var myImg = document.getElementById("sky");
        var currWidth = myImg.clientWidth;
        if(currWidth == 500){
            alert("Maximum zoom-in level reached.");
        } else{
            myImg.style.width = (currWidth + 50) + "px";
        } 
    }
    function zoomout(){
        var myImg = document.getElementById("sky");
        var currWidth = myImg.clientWidth;
        if(currWidth == 50){
            alert("Maximum zoom-out level reached.");
        } else{
            myImg.style.width = (currWidth - 50) + "px";
        }
    }
</script>
</head>
<body>
    <p>
        <button type="button" onclick="zoomin()">Zoom In</button>
        <button type="button" onclick="zoomout()">Zoom Out</button>
    </p>
    <img src="sky.jpg" id="sky" width="250" alt="Cloudy Sky">
</body>
</html>