Можно ли в изменение стилей css подставлять переменную?

@sendxt · Регистрация: 25.04.2012

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

Хочу в топ и лефт подставить значение из события clientX, clientY как это сделать?

JavaScript
1
el.style.cssText="top:cюда; left:cюда;";

@kserksys · 15.08.2014, 13:18

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
body{width:100%;height:100%;} 
#el{width:100px;height:100px;border:1px solid grey;}
</style>
 
<div id="el">el</div>
 
<script>
 
var body = document.getElementsByTagName('body')[0];
var el = document.getElementById('el');
    body.onclick = function(e){
        el.style.position = 'absolute';
        el.style.top = e.clientY;
        el.style.left = e.clientX;
}
</script>

@sendxt · 15.08.2014, 14:22 **[ТС]**

kserksys, таким образом не меняются свойства блока #ball , хотя в алерте вывожу clientX/Y , всё ок

Добавлено через 17 секунд

JavaScript
1
2
3
4
5
6
7
var body = document.getElementsByTagName('body')[0];
        var ball = document.getElementById('ball');
 
            body.onclick = function(e) {
                ball.style.top = e.clientY;
                ball.style.left = e.clientX;
            }

Добавлено через 34 секунды

HTML5
1
2
3
4
5
6
<div id="container">
        <div id="inner">
            <div id="ball"></div>
        </div>
 
    </div>

Добавлено через 24 секунды

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#container {
            border:10px solid #000;
            width:200px;
            height:200px;
            margin: 50px;
            cursor:pointer;
        }
 
        #inner {
            background:green;
            width:200px;
            height:200px;
        }
 
        #ball {
            position: absolute;
            background:url(ball.gif) no-repeat;
            width: 40px;
            height: 40px;
            top:60px;
            left:60px;
            
        }

Добавлено через 1 минуту
Именно интересно с подставлением изменением css свойств что не так ?

Добавлено через 4 минуты

JavaScript
1
2
3
4
body.onclick = function(){
                var cont = document.getElementById('container');
                cont.style.width = '500px'
            }

вот такой вариант не работает, обьясните почему?)) Что-то явно не допонимаю видимо )

@Eva Rosalene · 15.08.2014, 14:27

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

вот такой вариант не работает, обьясните почему?

Потому что не body, а document.body

@Thisman · 15.08.2014, 14:54

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

Потому что не body, а document.body

sendxt, или

JavaScript
1
document.onclick = function () { //.... }

@sendxt · 15.08.2014, 15:56 **[ТС]**

Thisman, document.onclick = так работает , так нет document.body.onclick

Добавлено через 1 минуту
вот так по клику ничего не меняется у #ball

JavaScript
1
2
3
4
5
6
7
8
var ball = document.getElementById('ball');
 
            
 
            document.onclick = function(e) {
                ball.style.top = e.clientY;
                ball.style.left = e.clientX;
            }

@Eva Rosalene · 15.08.2014, 16:29

JavaScript
1
2
3
4
5
var ball = document.getElementById('ball');
document.onclick = function(e) {
   ball.style.top = e.clientY + "px";
   ball.style.left = e.clientX + "px";
}

@Thisman · 15.08.2014, 16:58

FraidZZ,

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

JavaScript
1
2
 ball.style.top = e.clientY + "px";
 ball.style.left = e.clientX + "px";

Всегда натыкался на эту проблему, просто по умолчанию значению 0 можно не приписывать "px" , а вот дальше уже да, необходимо

sendxt, Еще не забудь поставить элементу

CSS
1
position:fixed / absolute

Новые блоги и статьи Все статьи Все блоги /
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .
Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .