Javascript-форум - Скрипт для изменения свойст изображения

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