Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Почему не работает смена стиля div-a? (https://javascript.ru/forum/dom-window/16622-pochemu-ne-rabotaet-smena-stilya-div.html)

Dimasick 15.04.2011 10:49
Почему не работает смена стиля 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>

dmitriymar 15.04.2011 10:53
<div id="1" class='style1'>бла-бла-бла</div>

walik 15.04.2011 11:16
Цитата:
Сообщение от 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>

Dimasick 15.04.2011 12:23
Теперь работает
 
Мдааа, действительно, если стиль писАть как строку, то работает.
Сенкс! :thanks:

tom_ozi 29.07.2013 10:04
Добрый день
Подскажите, пожалуйста, как настроить кнопку, что бы она возвращала первоначальный стиль?
Спасибо

skrudjmakdak 29.07.2013 10:07
покажите ваш код, пожалуйста

ksa 29.07.2013 10:19
Цитата:
Сообщение от 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>

tom_ozi 29.07.2013 11:57
Все работает! Вот, только у меня на странице несколько таких div с одинаковыми id.
При нажатии кнопки срабатывает только первый.

tom_ozi 29.07.2013 12:19
Цитата:
Сообщение от skrudjmakdak (Сообщение 264806)
покажите ваш код, пожалуйста
Код взят из примера

skrudjmakdak 29.07.2013 12:28
Цитата:
Сообщение от tom_ozi (Сообщение 264830)
Вот, только у меня на странице несколько таких div с одинаковыми id.
id он на то и id, чтобы быть единственным. 2 одинаковых айдишника быть не может!


Часовой пояс GMT +3, время: 23:45.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице