Форум

sexys · #1 (**permalink**) 15.10.2015, 14:39

есть изображение.
Нужно через input, которые под картинкой задать высоту и ширину, а также толщину и цвет рамки вокруг картинки вместе с инпутами , также есть две кнопки просмотр и отменить, т.е. задали размеры,альтернативный текст, потом нажали кнопку просмотр и должна картинка изменится в размерах...нужно функция небольшая, кому не сложно помогите

EmperioAf · #2 (**permalink**) 15.10.2015, 16:03

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>
.nature-image {
    border: 0 solid black;
    opacity: .7;
    transition: opacity .4s ease;
    cursor: pointer;
}

.nature-image:hover {
  opacity: 1;
}

.about-image>label {
  display: block;
}

</style>
</head>
<body>
<a href="http://design-kmv.ru/wp-content/uploads/2014/12/koltsogora.jpg"><img class="nature-image" src="http://design-kmv.ru/wp-content/uploads/2014/12/koltsogora.jpg" alt="скалы от природы"></a> 
<div class="about-image">
<label for="height">Высота: <input id="height" type="text" value="200"> px </label>
<label for="width">Ширина: <input id="width" type="text" value="200"> px </label>
<label for="thickness">Толщина: <input id="thickness" type="text" value="20"> px </label>
<label for="color">Цвет: <input id="color" type="color"></label>
</div>
<button class="see">Просмотреть</button>
<button class="cancel">Отменить</button>
    <script>
var img = document.querySelector('.nature-image');
var heightText = document.getElementById('height');
var widthText = document.getElementById('width');
var thicknessText = document.getElementById('thickness');
var colorText = document.getElementById('color');

var computedStyle = getComputedStyle(img);
var height = computedStyle.height;
var width = computedStyle.width;

var thickness = computedStyle.borderWidth;
var color = computedStyle.borderColor;
console.log(thickness);
console.log(color);

document.querySelector('.see').onclick = function(){
  img.style.height = +heightText.value+'px';
  img.style.width = +widthText.value+'px';
  img.style.borderWidth = +thicknessText.value+'px';
  img.style.borderColor = colorText.value;
}

document.querySelector('.cancel').onclick = function(){
  img.style.height = 390 + 'px';
  img.style.width = 550 + 'px';
  img.style.borderWidth = +thicknessText.value+'px';
  img.style.borderColor = colorText.value;
}
    </script>
</body>
</html>

Эдем · #3 (**permalink**) 19.02.2019, 16:54

Объясните нубу (лучше с примером), как нужно изменить этот скрипт, чтобы работало без кнопки.

Т.е. чтобы сразу превьюха отрисовывалась.

Форум

Справочник

Discord чат

Курсы javascript