Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.09.2014, 01:19
Новичок на форуме
Отправить личное сообщение для sav-oks Посмотреть профиль Найти все сообщения от sav-oks
 
Регистрация: 03.09.2014
Сообщений: 8

Добавить стиль не удаляя существующий
Помогите разобраться.
Есть код:
<!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 от одного стиля к другому.
Скрипт добавления стиля не работает, подскажите, что я делаю не так?

Последний раз редактировалось sav-oks, 03.09.2014 в 01:39.
Ответить с цитированием
  #2 (permalink)  
Старый 03.09.2014, 02:03
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

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

так работает
Ответить с цитированием
  #3 (permalink)  
Старый 03.09.2014, 02:26
Новичок на форуме
Отправить личное сообщение для sav-oks Посмотреть профиль Найти все сообщения от sav-oks
 
Регистрация: 03.09.2014
Сообщений: 8

Сообщение от Poznakomlus Посмотреть сообщение
<!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>

Последний раз редактировалось sav-oks, 03.09.2014 в 02:41.
Ответить с цитированием
  #4 (permalink)  
Старый 03.09.2014, 02:46
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

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

посмотри внимательно как прописаны стили
Ответить с цитированием
  #5 (permalink)  
Старый 03.09.2014, 02:49
Новичок на форуме
Отправить личное сообщение для sav-oks Посмотреть профиль Найти все сообщения от sav-oks
 
Регистрация: 03.09.2014
Сообщений: 8

Сообщение от Poznakomlus Посмотреть сообщение
<!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>

посмотри внимательно как прописаны стили
да, точно) ночь, бошка уже не соображает) спасибо огромное, это то что надо
Ответить с цитированием
  #6 (permalink)  
Старый 03.09.2014, 04:47
Новичок на форуме
Отправить личное сообщение для maksbaks Посмотреть профиль Найти все сообщения от maksbaks
 
Регистрация: 02.09.2014
Сообщений: 4

прошу, помогите
http://javascript.ru/forum/showthrea...692#post328692
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Knockout добавить несколько классов svs Библиотеки/Тулкиты/Фреймворки 0 10.07.2014 16:22
Как объединить 4 одинаковых функции Batyabest Общие вопросы Javascript 2 21.12.2013 22:53
Не меняется стиль блока lokifc Events/DOM/Window 2 10.11.2012 01:39
Добавить в набор новые элементы a22432 jQuery 1 28.08.2012 14:34
Скрипт калькулятора (не могу добавить еще одно значение) Jee_Day Я не знаю javascript 2 22.05.2009 13:19