Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.02.2012, 21:43
Новичок на форуме
Отправить личное сообщение для ghostly Посмотреть профиль Найти все сообщения от ghostly
 
Регистрация: 18.02.2012
Сообщений: 4

Увеличение 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>
Ответить с цитированием
  #2 (permalink)  
Старый 19.02.2012, 00:29
Аватар для Shaci
:-/
Отправить личное сообщение для Shaci Посмотреть профиль Найти все сообщения от Shaci
 
Регистрация: 28.09.2009
Сообщений: 1,126

это что ли нужно?
<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>
Ответить с цитированием
  #3 (permalink)  
Старый 19.02.2012, 08:03
Новичок на форуме
Отправить личное сообщение для ghostly Посмотреть профиль Найти все сообщения от ghostly
 
Регистрация: 18.02.2012
Сообщений: 4

Да Хм... а почему если я div сделаю в теле body, код не работает?
Ответить с цитированием
  #4 (permalink)  
Старый 19.02.2012, 08:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

Сообщение от ghostly
код не работает
Покажите Ваш код ??? скорее всего вы неправильно подключаите скрипт
Ответить с цитированием
  #5 (permalink)  
Старый 19.02.2012, 11:28
Новичок на форуме
Отправить личное сообщение для ghostly Посмотреть профиль Найти все сообщения от ghostly
 
Регистрация: 18.02.2012
Сообщений: 4

Все,разобрался. В варианте который предложил 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>
Ответить с цитированием
  #6 (permalink)  
Старый 19.02.2012, 11:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

Сообщение от ghostly
А если css подключить или написать в head-е, то не работает
Свойство style дает доступ только свойствам, назначенным с помощью него или с помощью атрибута "style". в этойже статье как получить значение из css
Ответить с цитированием
  #7 (permalink)  
Старый 19.02.2012, 13:31
Новичок на форуме
Отправить личное сообщение для ghostly Посмотреть профиль Найти все сообщения от ghostly
 
Регистрация: 18.02.2012
Сообщений: 4

Понял,спасиба за совет!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Увеличение высоты DIVа по нажатию ссылки bruklin24 Общие вопросы Javascript 14 28.05.2014 13:14
Нажат ли shift не по событию? ppp jQuery 2 29.03.2010 08:57
Ошибка при добавлении обработчика к событию Riim Events/DOM/Window 32 19.01.2010 14:17
JQuery и сдвиг DIVа slim jQuery 5 26.07.2009 17:21
Увеличение шрифта статьи. hello Элементы интерфейса 14 04.12.2008 14:32