Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Добавить стиль не удаляя существующий (https://javascript.ru/forum/misc/49910-dobavit-stil-ne-udalyaya-sushhestvuyushhijj.html)

sav-oks 03.09.2014 01:19
Добавить стиль не удаляя существующий
 
Помогите разобраться.
Есть код:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery-migrate-1.2.1.min.js"></script>

<script type="text/javascript">
$("#button1").click(function(){
$("#element").toggleClass("class");
$("#element2").toggleClass("class2");
});
</script>
</head>
<body>
<button id="button1">батон</button>
<div id="element"></div>
<div id="element2"></div>

<style type="text/css">
#element { width: 50px; height: 50px; border: 1px solid #000000; }
#element2 { width: 50px; height: 50px; border: 1px solid #1065D8; }
.class { width: 100px; height: 100px; }
.class2 { width: 100px; height: 100px; border-color: #9d9d9d; }
#button1 { background: rgba(35,110,179,1.00); color: rgba(21,227,211,1.00) }
</style>

</body>
</html>

Задача.
При нажатии на кнопку, добавить стиль к элементу, при повторном нажатии, вернуться к исходному стилю. Вторичный стиль нужно именно добавить, так как планируется подключить анимацию перехода средствами css от одного стиля к другому.
Скрипт добавления стиля не работает, подскажите, что я делаю не так?

Vlasenko Fedor 03.09.2014 02:03 
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Документ без названия</title>
    <style>
      #element {
        color: green;
        width: 50px;
        height: 50px;
        border: 1px solid #000000;
      }
      #element2 {
        width: 50px;
        height: 50px;
        border: 1px solid #1065D8;
      }
      .class {
        background-color: red;
        width: 100px;
        height: 100px;
      }
      .class2 {
        background-color: green;
        width: 100px;
        height: 100px;
        border-color: #9d9d9d;
      }
      #button1 {
        background: rgba(35, 110, 179, 1.00);
        color: rgba(21, 227, 211, 1.00)
      }
    </style>
  </head>
  
  <body>
    <button id="button1">батон</button>
    <div id="element"></div>
    <div id="element2"></div>
    <script type="text/javascript">
      window.onload = function () {
        document.getElementById("button1").onclick = function () {
          var el = document.getElementById("element");
          var el2 = document.getElementById("element2");
          el.className = el.className == 'class' ? '' : 'class';
          el2.className = el2.className == 'class2' ? '' : 'class2';
        };
      };
    </script>
  </body>
</html>

так работает

sav-oks 03.09.2014 02:26
Цитата:
Сообщение от Poznakomlus (Сообщение 328700) 
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Документ без названия</title>
    <style>
      #element {
        color: green;
        width: 50px;
        height: 50px;
        border: 1px solid #000000;
      }
      #element2 {
        width: 50px;
        height: 50px;
        border: 1px solid #1065D8;
      }
      .class {
        background-color: red;
        width: 100px;
        height: 100px;
      }
      .class2 {
        background-color: green;
        width: 100px;
        height: 100px;
        border-color: #9d9d9d;
      }
      #button1 {
        background: rgba(35, 110, 179, 1.00);
        color: rgba(21, 227, 211, 1.00)
      }
    </style>
  </head>
  
  <body>
    <button id="button1">батон</button>
    <div id="element"></div>
    <div id="element2"></div>
    <script type="text/javascript">
      window.onload = function () {
        document.getElementById("button1").onclick = function () {
          var el = document.getElementById("element");
          var el2 = document.getElementById("element2");
          el.className = el.className == 'class' ? '' : 'class';
          el2.className = el2.className == 'class2' ? '' : 'class2';
        };
      };
    </script>
  </body>
</html>

так работает
Не совсем, меняет только background, но border-color и size блоков остается прежним. Видимо тут играет приоритет id над class. Но как это обойти, это вопрос конечно.
Непонятно почему этот код совсем не работает
<script type="text/javascript">
$("#button1").click(function(){
$("#element").toggleClass("class");
$("#element2").toggleClass("class2");
});
</script>

Vlasenko Fedor 03.09.2014 02:46 
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Документ без названия</title>
    <style>
      #element {
        color: green;
        width: 50px;
        height: 50px;
        border: 1px solid #000000;
      }
      #element2 {
        width: 50px;
        height: 50px;
        border: 1px solid #1065D8;
      }
      #element.class {
        background-color: red;
        width: 100px;
        height: 100px;
      }
      #element2.class2 {
        background-color: green;
        width: 100px;
        height: 100px;
        border-color: #9d9d9d;
      }
      #button1 {
        background: rgba(35, 110, 179, 1.00);
        color: rgba(21, 227, 211, 1.00)
      }
    </style>
  </head>
  
  <body>
    <button id="button1">батон</button>
    <div id="element"></div>
    <div id="element2"></div>
    <script type="text/javascript">
      window.onload = function () {
        document.getElementById("button1").onclick = function () {
          var el = document.getElementById("element");
          var el2 = document.getElementById("element2");
          el.className = el.className == 'class' ? '' : 'class';
          el2.className = el2.className == 'class2' ? '' : 'class2';
        };
      };
    </script>
  </body>
</html>

посмотри внимательно как прописаны стили

sav-oks 03.09.2014 02:49
Цитата:
Сообщение от Poznakomlus (Сообщение 328704) 
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Документ без названия</title>
    <style>
      #element {
        color: green;
        width: 50px;
        height: 50px;
        border: 1px solid #000000;
      }
      #element2 {
        width: 50px;
        height: 50px;
        border: 1px solid #1065D8;
      }
      #element.class {
        background-color: red;
        width: 100px;
        height: 100px;
      }
      #element2.class2 {
        background-color: green;
        width: 100px;
        height: 100px;
        border-color: #9d9d9d;
      }
      #button1 {
        background: rgba(35, 110, 179, 1.00);
        color: rgba(21, 227, 211, 1.00)
      }
    </style>
  </head>
  
  <body>
    <button id="button1">батон</button>
    <div id="element"></div>
    <div id="element2"></div>
    <script type="text/javascript">
      window.onload = function () {
        document.getElementById("button1").onclick = function () {
          var el = document.getElementById("element");
          var el2 = document.getElementById("element2");
          el.className = el.className == 'class' ? '' : 'class';
          el2.className = el2.className == 'class2' ? '' : 'class2';
        };
      };
    </script>
  </body>
</html>

посмотри внимательно как прописаны стили
да, точно) ночь, бошка уже не соображает) спасибо огромное, это то что надо

maksbaks 03.09.2014 04:47
прошу, помогите
http://javascript.ru/forum/showthrea...692#post328692


Часовой пояс GMT +3, время: 06:42.