Составить условие

@YaJora · Регистрация: 15.10.2014

Студворк — интернет-сервис помощи студентам

Подскажите как сделать условие
По клику выполнялись действия (блок выезжал, заезжал)

есть

CSS
1
.bg_profile {position: absolute; top: 48px;}

JavaScript
1
2
3
4
5
6
7
8
9
$('.profile').click(function(){
 
если .bg_profile  top: 48px; то выполнять 
    это $(".bg_profile").animate({ top:'-500px'},700);
 
если  .bg_profile  top: -500px;
        то $(".bg_profile").animate({ top:'48px'},700);
 
});

@HarizZ · 13.03.2016, 13:45

Единственное что на ум приходить это:
получите в переменную ваш элемент, например:

JavaScript
1
var box = document.getElementById("profile");

дальше получите все ComputedStyle вашего элемента:

JavaScript
1
var boxStyle = window.getComputedStyle(box, null);

"top: 48px" - используем регулярные выражение чтобы получить только число.

JavaScript
1
var top = parseInt(boxStyle.top.replace(/\D+/g,""));

После чего можете уже проверять если переменная top равна 48, то делаем что-то и так далее. Удачи Вам =)

@YaJora · 13.03.2016, 14:22 **[ТС]**

Возможно что-то не так написал.. не работает.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$('.profile').click(function(){
var box = document.getElementByClass("bg_profile");
var boxStyle = window.getComputedStyle(box, null);
var top = parseInt(boxStyle.top.replace(/\D+/g,""));
if (var top = 48){
    $(".bg_profile").animate({ top:'-500px'},700);
}   
else { 
    $(".bg_profile").animate({ top:'48px'},700);
}
});

@HarizZ · 13.03.2016, 14:25

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

getElementByClass

а случайно не getElementsByClassName??

@YaJora · 13.03.2016, 14:30 **[ТС]**

Да, верно getElementsByClassName

Ругает эту строку (Uncaught SyntaxError: Unexpected token var)
if (var top = 48){

@HarizZ · 13.03.2016, 14:35

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

var top = parseInt(boxStyle.top.replace(/\D+/g,""));

вы уже объявили здесь var top. Дальше просто используйте top

@YaJora · 13.03.2016, 14:40 **[ТС]**

JavaScript
1
var boxStyle = window.getComputedStyle(box, null);

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

CSS
1
.bg_profile {background: url("../img/bg_pr.jpg") no-repeat 0 0; position: absolute; top: -500px; z-index: 9997;}

@HarizZ · 13.03.2016, 15:22

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

position: absolute;

Смените на relative. И будет вам счастье)
Так же попробуйте получить элемент через getElementById()

Добавлено через 12 минут
YaJora,

Сделал что-то похожее и примитивное и все работает. Div уходит за экран и опять появляется при нажатии на кнопку. Переделайте под себя.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
document.getElementById('profile').onclick = function(){
        animateBox();
    };
 
    function animateBox() {
 
        var box = document.getElementById("bgprofile");
        var boxStyle = window.getComputedStyle(box, null);
        var top = parseInt(boxStyle.top.replace(/\D+/g,""));
 
        if (top == 48){
            document.querySelector(".bg_profile").style.top ='-500px';
        }   
        else if (top != 48){ 
            document.querySelector(".bg_profile").style.top = '48px';
        }
    }

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@YaJora 2 / 2 / 0 Регистрация: 15.10.2014 Сообщений: 61
	13.03.2016, 14:30 [ТС]
	Да, верно getElementsByClassName Ругает эту строку (Uncaught SyntaxError: Unexpected token var) if (var top = 48){ 0

Составить условие

Решение