03.09.2014, 01:19
|
Новичок на форуме
|
|
Регистрация: 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.
|
|
03.09.2014, 02:03
|
|
Профессор
|
|
Регистрация: 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>
так работает
|
|
03.09.2014, 02:26
|
Новичок на форуме
|
|
Регистрация: 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.
|
|
03.09.2014, 02:46
|
|
Профессор
|
|
Регистрация: 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>
посмотри внимательно как прописаны стили
|
|
03.09.2014, 02:49
|
Новичок на форуме
|
|
Регистрация: 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>
посмотри внимательно как прописаны стили
|
да, точно) ночь, бошка уже не соображает) спасибо огромное, это то что надо
|
|
03.09.2014, 04:47
|
Новичок на форуме
|
|
Регистрация: 02.09.2014
Сообщений: 4
|
|
|
|
|
|