Форум

dreamfactor · #1 (**permalink**) 29.03.2014, 20:23

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

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

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

dreamfactor,

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

но луше менять класс
http://learn.javascript.ru/styles-and-classes

dreamfactor · #3 (**permalink**) 29.03.2014, 21:02

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

dreamfactor,

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

но луше менять класс
http://learn.javascript.ru/styles-and-classes

что-то не работает так , а как можно поменять например класс button на button2

рони · #4 (**permalink**) 29.03.2014, 21:13

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>

Vlasenko Fedor · #5 (**permalink**) 29.03.2014, 21:29

<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>

Форум

Справочник

Discord чат

Курсы javascript