Возврат параметра после клика
Вложений: 1
Нужно чтобы после клика происходило следующее
Вложение 3035 и параметр Код:
document.getElementById('body').style.top = '300px';Код:
document.getElementById('body').style.top = '52px';Помогите пожалуйста |
sprkl335,
сделали бы полноценный макет а не картинки, достаточно менять класс classList.toggle, а не стиль |
Как это можно тут сделать? Помоги пожалуйста
|
sprkl335,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
var body = document.getElementById("div1");
body.classList.toggle("unslid");}
div.headr { z-index: 1;
width:100%;
background-color:#c2ccff;
position: absolute;
margin:-8px;
position: fixed;
height: 600px;
padding: 0px;
z-index: 1;
}
div.body{ z-index: 2 ;
background-color: #fff;
position: absolute;
top: 52px;
margin-left:-8px;
height: 100%;
width: 100%;
position: fixed;
box-shadow: 0px -4px 5px 0px rgba(0,0,0,0.75);
}
input.slide {
position: absolute;
left:48%;
top:37px;
}
slid {
background-color: #fff;
position: absolute;
top: 300px;
transition: 0.1s linear;
margin-left:-8px;
height: 100%;
width: 100%;
position: fixed;
box-shadow: 0px -4px 5px 0px rgba(0,0,0,0.75);
}
unslid {
background-color: #fff;
position: absolute;
top: 52px;
transition: 0.1s linear;
margin-left:-8px;
height: 100%;
width: 100%;
position: fixed;
box-shadow: 0px -4px 5px 0px rgba(0,0,0,0.75);
}
<!DOCTYPE HTML>
<HTML>
<HEAD>
<style>
</style>
<script>
</script>
</head>
<body>
<div class="headr">
<b style=" position:absolute; margin-left:34%;"> Cirno is strongest </b>
<input id="slide" class="slide" type="image" src="https://psv4.vk.me/c414924/u331653025/docs/0ca38f6b8139/slid.png?extra=xCAy-_y2OTFVdecmOKN5GnsSQniOg8mc7_75hsVJt6jCZJu5MI_Mrl_LgQY-aqYD1Mqr036lAix_DIm72cH0tDCxdD8v4uiClKcO6oA1OkM148fP"width="2%" height="2%" outline="0px">
</div>
<div id="body" class="body">
</div>
</body>
</html>
|
sprkl335,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.hot{
border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px;
position: absolute;
top: 52px;
transition: top .8s ease-in-out;
}
.hot.dn{
top:300px
}
</style>
</head>
<body>
<div class="hot">click me</div>
<script>
window.addEventListener('DOMContentLoaded', function() {
var hot = document.querySelector('.hot');
hot.addEventListener('click', function create() {
hot.classList.toggle("dn")
});
});
</script>
</body>
</html>
|
Нужно сделать это с кнопкой
|
sprkl335,
что у вас является кнопкой? на то клик и запишите как вариант
window.addEventListener('DOMContentLoaded', function() {
var headr = document.querySelector('.headr'),
body = document.querySelector('.body'),
slide = document.querySelector('.slide');
headr.addEventListener('click', function create() {
body.classList.toggle("unslid");
slide.classList.toggle("unslid");
});
});
|
Кнопка у нас вот
<input id="slide" class="slide" type="image" src="https://psv4.vk.me/c414924/u331653025/docs/0ca38f6b8139/slid.png?extra=xCAy-_y2OTFVdecmOKN5GnsSQniOg8mc7_75hsVJt6jCZJu5MI_Mrl_LgQY-aqYD1Mqr036lAix_DIm72cH0tDCxdD8v4uiClKcO6oA1OkM148fP"width="2%" height="2%"> |
sprkl335,
так в строке 5 поменяйте headr на slide |
| Часовой пояс GMT +3, время: 16:51. |