Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.03.2014, 20:23
Аспирант
Отправить личное сообщение для dreamfactor Посмотреть профиль Найти все сообщения от dreamfactor
 
Регистрация: 20.10.2013
Сообщений: 31

Изменить стиль кнопки
как изменить стиль кнопки в зависимости от состояния чекбокса?

я вот пытался так делать но что то не так

document.getElementById('button').style=(document.getElementById('agree').checked)? ' width:218px; height:38px; background:url(../i/img_46g.png) no-repeat; cursor:pointer; margin:0 0 0 173px; border:none;': 'width:218px; height:38px; background:url(../i/img_46.png) no-repeat; cursor:pointer; margin:0 0 0 173px; border:none;'
Ответить с цитированием
  #2 (permalink)  
Старый 29.03.2014, 20:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

dreamfactor,
document.getElementById('button').style.cssText

но луше менять класс
http://learn.javascript.ru/styles-and-classes
Ответить с цитированием
  #3 (permalink)  
Старый 29.03.2014, 21:02
Аспирант
Отправить личное сообщение для dreamfactor Посмотреть профиль Найти все сообщения от dreamfactor
 
Регистрация: 20.10.2013
Сообщений: 31

Сообщение от рони Посмотреть сообщение
dreamfactor,
document.getElementById('button').style.cssText

но луше менять класс
http://learn.javascript.ru/styles-and-classes
что-то не работает так , а как можно поменять например класс button на button2
Ответить с цитированием
  #4 (permalink)  
Старый 29.03.2014, 21:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

dreamfactor,
то есть прочитать по ссылке как это делать вы несмогли
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .button{
        color: #FF0000;
   }
   .button2{
      color: #00FF00;
   }
  </style>
   <script>
   function chk(obj)
{
  document.getElementById('button').style.cssText = (obj.checked)? ' width:218px; height:38px; background:url(http://javascript.ru/forum/images/smilies/blink.gif) no-repeat; cursor:pointer; margin:0 0 0 173px; border:none;': 'width:218px; height:38px; background:url(http://javascript.ru/forum/images/smilies/nono.gif) no-repeat; cursor:pointer; margin:0 0 0 173px; border:none;'
  document.getElementById('button').classList.toggle('button') ;
  document.getElementById('button').classList.toggle('button2');
}

</script>
</head>

<body>

   <input id="button" name="" type="button" value="test" class="button">
   <input id="agree" name="" type="checkbox" onclick="chk(this)">
</body>

</html>
Ответить с цитированием
  #5 (permalink)  
Старый 29.03.2014, 21:29
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

<style>
   .button1{
        color: #FF0000;
   }
   .button2{
      color: #00FF00;
   }
</style>
<input type="checkbox" id="chButton" />
<input type="button" value="My button" id="myButton" class="button1" />
<script>
  var chBut = document.getElementById("chButton");
  var but = document.getElementById("myButton");
  chBut.onclick = function () {
    but.className = this.checked ? "button2" : "button1";
  };
</script>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как в диалоговом окне изменить цвет кнопки, добавить фото и строку текста!!! Dmitriy78781 jQuery 1 25.06.2013 22:53
помогите изменить стиль realgleb Общие вопросы Javascript 3 03.05.2012 15:58
выбрать и изменить стиль элемента. Помогите найти ошибку nabiullin11 Элементы интерфейса 16 02.09.2011 11:23
Как изменить стиль дива diamed Events/DOM/Window 6 25.06.2011 18:52
как изменить масштаб кнопки Taurus1195 Общие вопросы Javascript 12 19.05.2011 18:24