Javascript-форум - Увеличение divа по событию

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

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

- - Увеличение divа по событию (https://javascript.ru/forum/misc/25886-uvelichenie-diva-po-sobytiyu.html)

Увеличение divа по событию

Привет всем! Я недавно начал изучение js,и придумал себе задание "при каждом наведении мыши на div нужно чтоб он увеличивался по ширине на какое то значение". У меня получилось только при одном наведении мыши,как сделать так чтобы, например навел мышь -> увеличился div на какое то значение,отвел мышь от diva, снова навел мышь -> увеличился div еще на какое то значение? Заранее спасиба!

<html>
<head>
<title>Submit
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
#result {
	background-color: green;
	width: 100px;
	}
</style>
<script type="text/javascript">
function click()
{
	var myDiv = document.getElementById('result');
	myDiv.style.width = 200 + "px";
}
window.onload = function ()
{
	var myDiv = document.getElementById('result');
	myDiv.onmouseover =  click;
}
</script>
</head>
<body>
<div id="result">123</div>
</body>
</html>

это что ли нужно?

<div id = "myDiv" style = "background-color:green; width:100px; height:100px"></div>
<script type = "text/javascript">
var myDiv = document.getElementById("myDiv");
myDiv.onmouseover = function () {
this.style.width = parseInt(this.style.width) + 50 + "px";
this.style.height = parseInt(this.style.height) + 50 + "px";
}
</script>

Да:) Хм... а почему если я div сделаю в теле body, код не работает?

Цитата:

Сообщение от ghostly

код не работает

Покажите Ваш код ??? скорее всего вы неправильно подключаите скрипт

Все,разобрался:). В варианте который предложил Shaci, div загружался до скрипта и был определен. Если div сделать в body,то скрипт видать раньше загружается чем body и не может найти элемент div, window.onload решает эту проблему:). Но у меня появился еще вопрос, почему если css стили прописать прям в div-е, то код работает:

<html>
<head>
<title>Submit
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function click()
{
	this.style.width = parseInt(this.style.width) + 50 + "px";
	this.style.height = parseInt(this.style.height) + 50 + "px";
}
window.onload = function ()
{
	var myDiv = document.getElementById('myDiv');
	myDiv.onmouseover = click;
}
</script>
</head>
<body>
<div id = "myDiv" style = "background-color:green; width:100px; height:100px"></div>
</body>
</html>

А если css подключить или написать в head-е, то не работает:(

<html>
<head>
<title>Submit
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- <link rel="stylesheet" type="text/css" href="styles.css"> !-->
<style type="text/css">
#myDiv {
background-color:green;
width:100px;
height:100px;
}
</style>
<script type="text/javascript">
function click()
{
	this.style.width = parseInt(this.style.width) + 50 + "px";
	this.style.height = parseInt(this.style.height) + 50 + "px";
}
window.onload = function ()
{
	var myDiv = document.getElementById('myDiv');
	myDiv.onmouseover = click;
}
</script>
</head>
<body>
<div id = "myDiv"></div>
</body>
</html>

Цитата:

Сообщение от ghostly

А если css подключить или написать в head-е, то не работает

Свойство style дает доступ только свойствам, назначенным с помощью него или с помощью атрибута "style". в этойже статье как получить значение из css

Понял,спасиба за совет!