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