How to increase and decrease image size using JavaScript

Answer: Use the JavaScript width и height property

You can use either width or height JavaScript property to proportionally increase и decrease the dimension of an image like zoom-in и zoom-out feature.

Let’s take a look at the following example to understи how it basically works:

Пример

```
<!DOCTYPE html>
```
```
<html lang="en">
```
```
<head>
```
```
<meta charset="utf-8">
```

<title>JavaScript Increasing и 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>
```

Here are some more FAQ related to this topic:

Как получить ближайший родительский элемент на js/jquery

Чтобы получить ближайший родительский элемент в JavaScript или jQuery, можно воспользоваться следующими методами: JavaScript: В JavaScript можно использовать метод closest(), который ищет ближайший родительский элемент (или сам элемент), который соответствует заданному селектору. Пример: jQuery: В jQuery также есть метод closest(), который работает аналогично. Пример: Метод closest() ищет ближайший элемент, подходящий под селектор, поднимаясь по дереву…

Подробнее

4 сентября, 2024
38

Как проверить через js/jquery, что в яндекс виджете рекламы выводится контент внутри эелемента

Например, у нас есть код от яндекс рекламы <div id=»yandex_rtb_R-A-1434520-3″ class=»rtb section section-widget» style=»max-height: 320px; display: block»></div> Чтобы проверить, выводится ли контент внутри этого элемента, вы можете использовать JavaScript или jQuery для проверки наличия дочерних элементов или текста внутри селектора. Вот несколько способов: Проверка наличия контента с использованием чистого JavaScript: Проверка наличия дочерних элементов с…

Подробнее

25 декабря, 2019
3493

Как сделать паузу при выполнении скрипта в JavaScript

Вы можете просто использовать метод setTimeout(), чтобы сделать паузу, прежде чем продолжить выполнение кода в JavaScript. Время задержки выполнения скрипта указывается в миллисекундах (тысячных долях секунды). Давайте посмотрим следующий пример, чтобы понять, как это работает: Как вы заметили в предыдущем примере, JS-код после метода setTimeout() продолжает выполнение. Однако, если вам нужен настоящий «сон», когда все…

Подробнее

How to increase and decrease image size using JavaScript

Answer: Use the JavaScript width и height property

Пример

Читайте также

Похожие посты

Как получить ближайший родительский элемент на js/jquery

Как проверить через js/jquery, что в яндекс виджете рекламы выводится контент внутри эелемента

Как сделать паузу при выполнении скрипта в JavaScript

Answer: Use the JavaScript width и height property

Пример

Related FAQ

Читайте также

Похожие посты

Как получить ближайший родительский элемент на js/jquery

Как проверить через js/jquery, что в яндекс виджете рекламы выводится контент внутри эелемента

Как сделать паузу при выполнении скрипта в JavaScript