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

@int · Регистрация: 09.03.2010

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

Как правильно сделать перемещение дива по экрану при нажатии кнопки ?
Я допер что получая свойство css оно является строкой с окончанием "px" который мешает перемещать динамически. Как сделать правильно, пока не понял. Задал абсолютное позиционирование для дива , получаю его свойство позиции сверху,а дальше оказывается оно не число а текст. Получается надо использовать регулярные выражения для отрубления текста или можно как то проще? Вот моя попытка

HTML5

<html>
<head>
    <title>Move</title>
<script language = "JavaScript">
<!--
    function move(){
        var y = document.getElementById('knopka').style.top;
        if(y==0){
            y = 100;
            alert(0);
            knopka.style.top +=  y;
        }
        else if(y == '100px'){
            alert('NOT NULL'+' '+y);
        }   
    }
    
    function view(){
    if(knopka.style.display=="none")
    knopka.style.display="block";
    else
    knopka.style.display="none";
    }
-->
</script>
 
<style>
    #knopka{
        position: absolute;
        right: 0;
        top: 0;
        display:block;
        width:50px;
        height:50px;
        padding:2px 10px 2px 10px;
        -webkit-box-shadow: 7px 7px 5px rgba(0,0,0,0.6); /* Для Safari 3.0 */
        -moz-box-shadow: 7px 7px 5px rgba(0,0,0,0.6); /* Для Firefox 3.5 */
        box-shadow: 7px 7px 5px rgba(0,0,0,0.6); /* Для современных браузеров */
        -webkit-border-radius: 10px; /* Радиус скругления для Safari 3.1 */
        -moz-border-radius: 10px; /* Для Firefox 3 */
        border-radius: 10px; /* Радиус скругления для современных браузеров */
        background: #eeece0; /* Цвет фона */
    }
    #knopka:hover{
        display:block;
        width:50px;
        height:50px;
        color:#fff;
        padding:2px 10px 2px 10px;
        -webkit-box-shadow: 7px 7px 5px rgba(0,0,0,0.6); /* Для Safari 3.0 */
        -moz-box-shadow: 7px 7px 5px rgba(0,0,0,0.6); /* Для Firefox 3.5 */
        box-shadow: 7px 7px 5px rgba(0,0,0,0.6); /* Для современных браузеров */
        -webkit-border-radius: 10px; /* Радиус скругления для Safari 3.1 */
        -moz-border-radius: 10px; /* Для Firefox 3 */
        border-radius: 10px; /* Радиус скругления для современных браузеров */
        background: #0000ff; /* Цвет фона */
        cursor: pointer;
    }
</style>
</head>
 
<body>
<form>
    <input type = "button" value = "Move" onClick="move()">
    <input id="button" type="button" onclick="view()" value="Скрыть/Показать" />
</form>
<div id="knopka" ></div>
</body>
</html>

Добавлено через 3 часа 1 минуту
Спасибо за помощь))) Короче вот решение, которое смог найти через справочники. Уверен, что оно не самое правильно, но работает и явно многим пригодится. Правда в IE не всяком работает.

HTML5

<html>
<head>
    <title>Move</title>
<script language = "JavaScript">
<!--
    function move(){
        var sKnopka = getComputedStyle(knopka, '');
        // Замена строки на число через функцию replace!
        var str = sKnopka.top;
        var s = str.replace("px","")
        //преобразование в число
        var num = Number(s);
        
        //логика
        num +=20;
        knopka.style.top = num+'px' ;
        
    }
    
    function view(){
    if(knopka.style.display=="none")
    knopka.style.display="block";
    else
    knopka.style.display="none";
    }
-->
</script>
 
<style>
    #knopka{
        position: absolute;
        right: 0px;
        top: 0px;
        display:block;
        width:50px;
        height:50px;
        padding:2px 10px 2px 10px;
        -webkit-box-shadow: 7px 7px 5px rgba(0,0,0,0.6); /* Для Safari 3.0 */
        -moz-box-shadow: 7px 7px 5px rgba(0,0,0,0.6); /* Для Firefox 3.5 */
        box-shadow: 7px 7px 5px rgba(0,0,0,0.6); /* Для современных браузеров */
        -webkit-border-radius: 10px; /* Радиус скругления для Safari 3.1 */
        -moz-border-radius: 10px; /* Для Firefox 3 */
        border-radius: 10px; /* Радиус скругления для современных браузеров */
        background: #eeece0; /* Цвет фона */
    }
    #knopka:hover{
        display:block;
        width:50px;
        height:50px;
        color:#fff;
        padding:2px 10px 2px 10px;
        -webkit-box-shadow: 7px 7px 5px rgba(0,0,0,0.6); /* Для Safari 3.0 */
        -moz-box-shadow: 7px 7px 5px rgba(0,0,0,0.6); /* Для Firefox 3.5 */
        box-shadow: 7px 7px 5px rgba(0,0,0,0.6); /* Для современных браузеров */
        -webkit-border-radius: 10px; /* Радиус скругления для Safari 3.1 */
        -moz-border-radius: 10px; /* Для Firefox 3 */
        border-radius: 10px; /* Радиус скругления для современных браузеров */
        background: #0000ff; /* Цвет фона */
        cursor: pointer;
    }
</style>
</head>
 
<body>
<form>
    <input type = "button" value = "Move" onClick="move()">
    <input id="button" type="button" onclick="view()" value="Скрыть/Показать" />
</form>
<div id="knopka" ></div>
</body>
</html>

@kalabuni · 16.09.2013, 02:39

проблема никак не в том, что якобы "свойство css является строкой с окончанием "px" который мешает перемещать динамически"

если бы вы сразу после строки #7 вашего первого кода прописали alert (y), то увидели, что выдаваемое окошко пустое
и там, разумеется, нет никакого 'px', ибо там нет вообще ничего

о сути читайте здесь
в вашем коде изначально правила стиля тегу#knopka прописаны не в самом теге, а в стилевом блоке
поэтому узнать значение этого свойства через объект style нельзя
--------

второй ваш вариант как раз узнаёт текущее значение правила стиля с помощь метода getComputedStyle ()
а для старых версий MSIE надо пользоваться объектом currentStyle

Блоги программистов
Как использовать GraphQL в C# с HotChocolate Programming 05.01.2025 GraphQL — это современный подход к разработке API, который позволяет клиентам запрашивать только те данные, которые им необходимы. Это делает взаимодействие с API более гибким и эффективным по. . .	Модель полного двоичного суматора с помощью логических операций (python) AlexSky-coder 04.01.2025 def binSum(x:list, y:list): s=^y] p=x and y for i in range(1,len(x)): s. append((x^y)^p) p=(x and y)or(p and (x or y)) return s x=list() y=list()	Это мы не проходили, это нам не задавали...(шестибитный асихронный счётчик с управляющим сигналом заде Hrethgir 04.01.2025 Асинхронный счётчик на сумматорах (шестиразрядный по числу диодов на плате, но наверное разрядов будет больше - восемь или шестнадцать, а диоды на старшие), так как триггеры прошли тестирование и. . .	Руководство по созданию бота для Телеграм на Python IT_Exp 04.01.2025 Боты для Телеграм представляют собой автоматизированные программы, которые выполняют различные задачи, взаимодействуя с пользователями через интерфейс мессенджера. В данной статье мы рассмотрим,. . .	Применение компонентов PrimeVue в Vue.js 3 на TypeScript BasicMan 04.01.2025 Введение в PrimeVue и настройка окружения PrimeVue представляет собой мощную библиотеку компонентов пользовательского интерфейса для Vue. js 3, которая предоставляет разработчикам богатый набор. . .	Как стать Senior developer cpp_developer 04.01.2025 В современной индустрии разработки программного обеспечения позиция Senior Developer представляет собой не просто следующую ступень карьерной лестницы, а качественно новый уровень профессионального. . .
Что известно о дате выхода Windows 12 и чего от нее ждать IT_Exp 04.01.2025 В мире технологий постоянно происходят изменения, и операционные системы не являются исключением. Windows 11, выпущенная в октябре 2021 года, принесла множество инноваций и улучшений, но. . .	Что новенького в .NET Core 9 Programming 04.01.2025 Обзор ключевых изменений в . NET Core 9 Платформа . NET Core продолжает активно развиваться, и версия 9 представляет собой значительный шаг вперед в эволюции этой технологии. Новый релиз. . .	Инструкция по установке python3.13.1 в Debian 12 AlexSky-coder 03.01.2025 sudo apt update sudo apt install build-essential zlib1g-dev libncurses5-dev libgdbm-dev libnss3-dev libssl-dev libreadline-dev libffi-dev wget. . .	Затестил триггеры. архив проекта прилагаю с GOA файлами в настройках архиватора проектов. Hrethgir 03.01.2025 В этот раз нет закольцованности, потому что от неё только глюки, как я понял, логика не вырезанная. Триггеры очень быстрые если верить измерениям с помощью анализатора от Gowin. Есть ещё регистры,. . .	Python в помощь DevOps IT_Exp 03.01.2025 Причины использования Python в работе DevOps Python стал неотъемлемой частью мира DevOps, и это не случайно. Этот язык программирования обладает множеством преимуществ, которые делают его. . .	Angular vs React vs Vue.js BasicMan 03.01.2025 О, друзья-разработчики и просто любопытные читатели! Сегодня мы отправимся в увлекательное путешествие по миру фронтенд-разработки, и первой остановкой станет Angular – этакий строгий немецкий. . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	16.09.2013, 02:39	2
	проблема никак не в том, что якобы "свойство css является строкой с окончанием "px" который мешает перемещать динамически" если бы вы сразу после строки #7 вашего первого кода прописали alert (y), то увидели, что выдаваемое окошко пустое и там, разумеется, нет никакого 'px', ибо там нет вообще ничего о сути читайте здесь в вашем коде изначально правила стиля тегу#knopka прописаны не в самом теге, а в стилевом блоке поэтому узнать значение этого свойства через объект style нельзя -------- второй ваш вариант как раз узнаёт текущее значение правила стиля с помощь метода getComputedStyle () а для старых версий MSIE надо пользоваться объектом currentStyle 0