Javascript.RU

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

Почему не работает смена стиля div-a?
Простой код, но при нажатии на кнопку стиль не меняется. Подскажите, плз, что тут не так?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 
<html> <head>

<style type='text/css'>
.style1  {width: 300; height: 100; background: #f00000; text-align:center;}
.style2  {width: 400; height: 200; background: #00f000; text-align:left;}
</style>

<script type="text/javascript">
 function change()
{ 
  var c = document.getElementById('1');
  c.className = style2;
}   
</script>

</head> 
<div id=1 class='style1'>бла-бла-бла</div>
<input type=button  value='Поменять стиль' onclick="change()">
<body> 
</body> 
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 15.04.2011, 10:53
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

<div id="1" class='style1'>бла-бла-бла</div>
Ответить с цитированием
  #3 (permalink)  
Старый 15.04.2011, 11:16
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

Сообщение от Dimasick
c.className = style2;
style2 - это переменная, а надо передавать строку:
c.className = 'style2';


<html> <head>
 
<style type='text/css'>
.style1  {width: 300; height: 100; background: #f00000; text-align:center;}
.style2  {width: 400; height: 200; background: #00f000; text-align:left;}
</style>
 
<script type="text/javascript">
 function change()
{
  var c = document.getElementById('1');
  c.className = 'style2';
}  
</script>
 
</head>
<div id=1 class='style1'>бла-бла-бла</div>
<input type=button  value='Поменять стиль' onclick="change()">
<body>
</body>
</html>
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
Ответить с цитированием
  #4 (permalink)  
Старый 15.04.2011, 12:23
Интересующийся
Отправить личное сообщение для Dimasick Посмотреть профиль Найти все сообщения от Dimasick
 
Регистрация: 15.04.2011
Сообщений: 26

Теперь работает
Мдааа, действительно, если стиль писАть как строку, то работает.
Сенкс!
Ответить с цитированием
  #5 (permalink)  
Старый 29.07.2013, 10:04
Интересующийся
Отправить личное сообщение для tom_ozi Посмотреть профиль Найти все сообщения от tom_ozi
 
Регистрация: 29.07.2013
Сообщений: 11

Добрый день
Подскажите, пожалуйста, как настроить кнопку, что бы она возвращала первоначальный стиль?
Спасибо
Ответить с цитированием
  #6 (permalink)  
Старый 29.07.2013, 10:07
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

покажите ваш код, пожалуйста
Ответить с цитированием
  #7 (permalink)  
Старый 29.07.2013, 10:19
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

Сообщение от tom_ozi
как настроить кнопку, что бы она возвращала первоначальный стиль?
Как вариант...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 
<html> <head>

<style type='text/css'>
.style1  {width: 300; height: 100; background: #f00000; text-align:center;}
.style2  {width: 400; height: 200; background: #00f000; text-align:left;}
</style>

<script type="text/javascript">
function change() { 
   var c = document.getElementById('1');
   c.className = (c.className == 'style1') ? 'style2' : 'style1';
};   
</script>

</head> 
<div id='1' class='style1'>бла-бла-бла</div>
<input type=button  value='Поменять стиль' onclick="change()">
<body> 
</body> 
</html>
Ответить с цитированием
  #8 (permalink)  
Старый 29.07.2013, 11:57
Интересующийся
Отправить личное сообщение для tom_ozi Посмотреть профиль Найти все сообщения от tom_ozi
 
Регистрация: 29.07.2013
Сообщений: 11

Все работает! Вот, только у меня на странице несколько таких div с одинаковыми id.
При нажатии кнопки срабатывает только первый.
Ответить с цитированием
  #9 (permalink)  
Старый 29.07.2013, 12:19
Интересующийся
Отправить личное сообщение для tom_ozi Посмотреть профиль Найти все сообщения от tom_ozi
 
Регистрация: 29.07.2013
Сообщений: 11

Сообщение от skrudjmakdak Посмотреть сообщение
покажите ваш код, пожалуйста
Код взят из примера
Ответить с цитированием
  #10 (permalink)  
Старый 29.07.2013, 12:28
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

Сообщение от tom_ozi Посмотреть сообщение
Вот, только у меня на странице несколько таких div с одинаковыми id.
id он на то и id, чтобы быть единственным. 2 одинаковых айдишника быть не может!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему не работает на jQuery 1.4.4? pro10026 jQuery 13 06.03.2014 10:22
Почему то работает, то нет? gyunduz Общие вопросы Javascript 0 22.01.2011 16:08
Анимация. Помогите понять почему не работает. kadurban jQuery 4 08.07.2010 20:50
Почему это работает? (инклуд JS в JS) Василий Б. Общие вопросы Javascript 4 11.06.2010 12:41
Не работает AppendChild для div, причём только в IE _Kpot_ Internet Explorer 5 12.02.2009 10:55