Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
27 / 41 / 13
Регистрация: 15.05.2013
Сообщений: 1,313
1

Перемещение элемента

20.10.2014, 15:47. Просмотров 922. Ответов 4
Метки нет (Все метки)

Почему строка 20 возвращает NaN в переменной x?
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style>
#b{
position: absolute;
left: 100px;
top: 100px;
/*font-size: 50px;*/
}
</style>
 
</head>
<body>
<script>
document.onclick=f;
 
function f(){
  x=document.all.b.style.left;
  alert(x);
  x=parseInt(x);
  x+=300;
  document.all.b.style.left=x+'px';
 
  //document.all.b.style.left='600px';
}
</script>
 
<h1 id='b'>O</h1>
 
</body>
</html>
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
20.10.2014, 15:47
Ответы с готовыми решениями:

перемещение элемента
Как правильно сделать перемещение дива по экрану при нажатии кнопки ? Я допер что получая свойство...

Перемещение элемента с задержкой
Всем привет. Решил сделать плавное перемещение объекта для старых версий HTML (без jQuery), но...

Перемещение элемента в координаты клика мышки
Здравствуйте. Моя задача переместить элемент в координаты клика мышки. Т.е. пользователь кликает...

Перемещение элемента в дереве элементов
Возникла проблема. Следующий jQuery код: if(!window) load_js(); ...

4
54 / 54 / 30
Регистрация: 08.05.2012
Сообщений: 162
20.10.2014, 17:44 2
Для начала не советую использовать этот прием для нахождения элемента. Далее не объявлена через var переменная x. При использовании parseInt нужно указывать второй параметр - система счисления. В данном случае 10.
А значение не определяется, потому что оно прописано в css. Для извлечения свойств из css используется метод getComputedStyle.
Вот рабочий вариант
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
document.onclick=f;
 
function f(){
  var b = document.getElementById("b");
  var computedStyle = getComputedStyle(b, ''); 
  var x = computedStyle.left;
  alert(x);
  x = parseInt(x,10);
  x += 300;
  b.style.left = x + 'px';
}
</script>
 
<h1 id="b">O</h1>
1
супермизантроп
Эксперт JS
3722 / 2858 / 678
Регистрация: 18.04.2012
Сообщений: 8,446
20.10.2014, 19:38 3
во-первых, коллекция document.al.b поддерживается далеко не всеми браузерами
надо использовать метод document.getElementById ('b')

а во-вторых, прочитайте изменение стилевого правила transform из JS - там есть ответ на ваш вопрос
1
27 / 41 / 13
Регистрация: 15.05.2013
Сообщений: 1,313
20.10.2014, 22:48  [ТС] 4
Цитата Сообщение от kloks Посмотреть сообщение
Для начала не советую использовать этот прием для нахождения элемента. Далее не объявлена через var переменная x.
А значение не определяется, потому что оно прописано в css. Для извлечения свойств из css используется метод getComputedStyle.
что вы имеете ввиду, говоря, что значение прописано в css?
Вот пример, там также значение прописано в css, но только внутренний стиль, вложенный в блок
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<DOCTYPE html>
<html>
    <head>
    <meta charset='utf-8'>
    </head>
<body>
    <script>
        document.onclick=f;
        //var x;
        //ball=document.getElementById('b');
         
        function f(){
          x=document.all.b.style.left;
          //x=ball.style.left;
          alert(x);
          x=parseInt(x,10);
          x+=300;
          document.all.b.style.left=x+'px';
          //ball.style.left=x+'px';
 
        }
    </script>
 
    <h1 id='b' style='position: absolute; left:100px; top: 100px'>O</h1>     //внутренний стиль
 
</body>
</html
Цитата Сообщение от kalabuni Посмотреть сообщение
во-первых, коллекция document.al.b поддерживается далеко не всеми браузерами
надо использовать метод document.getElementById ('b')
я конечно не знаток в JavaScript, но то, что вы посоветовали с использованием document.getElementById ('b') наоборот не работает!
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<DOCTYPE html>
<html>
    <head>
    <meta charset='utf-8'>
    </head>
<body>
    <script>
        document.onclick=f;
        //var x;
        ball=document.getElementById('b');
         
        function f(){
          //x=document.all.b.style.left;
          x=ball.style.left;
          alert(x);
          x=parseInt(x,10);
          x+=300;
          //document.all.b.style.left=x+'px';
          ball.style.left=x+'px';
 
        }
    </script>
 
    <h1 id='b' style='position: absolute; left:100px; top: 100px'>O</h1>
 
</body>
</html
этот код не работает, в отличие от первого
0
54 / 54 / 30
Регистрация: 08.05.2012
Сообщений: 162
20.10.2014, 23:27 5
phpk, в вашем примере стиль указан как атрибут элемента. В этом случае значения elem.style.left будет доступно в javascript.
Если стили определены в заголовке html документа или во внешнем стиле, то elem.style.left не будет доступно напрямую. В этом случае нужно нужно использовать метод getComputedStyle.
Разберитесь в коде, который я дал. Он рабочий.
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
20.10.2014, 23:27

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Перемещение элемента при скролле
Здравствуйте, есть такой код, $(window).scroll(function() { if ($(this).width() &gt; 1000) { ...

Перемещение элемента
Подскажите, пожалуйста, с помощью каких функций можно задать перемещение (по кругу например)...

перемещение элемента
Добрый день. Не могли бы вы посказать как сделать так чтобы текст что на картинке перешел вниз ...

Перемещение элемента магнитом
Добрый день, уважаемые форумчане! Есть дощечка. На дощечке установлен вертикальный блок весом 50...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.