Javascript-форум - помогите найти ошибку новичку)

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - помогите найти ошибку новичку) (https://javascript.ru/forum/misc/59167-pomogite-najjti-oshibku-novichku.html)

помогите найти ошибку новичку)

НЕ МОГУ ВЫТЯНУТЬ СВОЙСТВО У ОБЬЕКТА, как будто запрос из функции не видит свойства обьекта, стили которого подключены внешним файлом CSS. Помогите разобраться! Или скажите что нужно почитать

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="kvadrat"></div>
<br>
<input type="button" value="вытащить ширину" onclick="zaprosW()">
<script src="main.js"></script>
</body>
</html>

#kvadrat {
width:300px;
height:300px;
border:2px solid red;
};

function zaprosW() {
var width1 = document.getElementById('kvadrat').style.width;
var width2 = document.getElementById('kvadrat').width;
console.log(width1);
console.log(width2);
console.log(typeof width1);
console.log(typeof width2);
}

function zaprosW() {

var Height = document.getElementById('kvadrat').clientHeight; // Высота
var Width = document.getElementById('kvadrat').clientWidth;   // Ширина

// Можно даже так написать
// var Height = kvadrat.clientHeight;  
// var Width = kvadrat.clientWidth;

console.log("Height: " + Height + "px");
console.log("Width: " + Width + "px");
}

Только устанавливать все равно:

document.getElementById('left').style.height = h;
document.getElementById('left').style.width = w;

http://codepen.io/anon/pen/RWJQMv