Вставка кода

@Schulzkafer · Регистрация: 31.12.2019

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

После проделанной самостоятельной работы, появилось много вопросов(и знаний), которые надо разложить по полочкам;
первый из них:

Как можно дописать test2, чтобы его координаты начали 'работать'?
Мне казалось что я такое уже проделывал, но сейчас почему-то это не работает
и не найду ни образец в интернете, ни причину неполадки.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
let test = document.createElement('p');
test.id = 'proba';
test.innerHTML= 13123123123123131;
test.style.position='relative';
test.style.left = '80px'
test.style.top = '100px';
test.style.fontSize ='30px';
document.body.append(test)
 
let test2 = "<div id='proba' style='color:red' style='position:absolute' style='left:40px' style='top:60px' >6666666666666</div>";
document.body.insertAdjacentHTML('beforeend', test2);

Не по теме:

Возможно, что у меня будет сразу еще вопрос из темы по координатам, так что попрошу не бросать этот пост потом))

Добавлено через 5 минут
**id='proba2'

@Plastun20 · 14.07.2020, 21:47

Schulzkafer, style пишется один раз

JavaScript
1
2
let test2 = "<div id='proba2' style='color:red; position:absolute; left:40px; top:60px' >6666666666666</div>";
document.body.insertAdjacentHTML('beforeend', test2);

@Schulzkafer · 14.07.2020, 22:47 **[ТС]**

блин, я почти так делал тоже, только точку с запятой не ставил, подумал что если даже я ее и не ставил все равно бы работало и причина не может быть в этом)) теперь понял, спасибо!

Добавлено через 54 минуты
Plastun20, еще одно мое скорее наблюдение, нежели чем вопрос
(может у вас комментарий есть по этому поводу):
если мы указываем координаты элемента в <style>, то первоначально, для изменения его положения
elem.style.left равен ничему, поэтому ф-ия go для него не работает

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
34
//....
<style>
#proba2 {
position:absolute;
left: 10px;
top:10px;
}
</style>
//.....
<script>
let test = document.createElement('div');
test.id = 'proba';
test.innerHTML= 13123123123123131;
test.style.position='absolute';
test.style.left = '80px'
test.style.top = '100px';
test.style.fontSize ='30px';
document.body.append(test)
 
// let test2 = "<div id='proba2' style='color:red; position:absolute; left:80px; top:100px' >6666666666666</div>";
let test2 = "<div id='proba2' style='color:red' >6666666666666</div>";
document.body.insertAdjacentHTML('beforeend', test2);
 
function go(elem) {
// elem.style.left = elem.getBoundingClientRect().left + 200 + 'px';// так работает с чем угодно
// elem.style.top = elem.getBoundingClientRect().top + 200 + 'px';
 
elem.style.left = parseInt(elem.style.left) + 100 + 'px';//а так для координатов в <style> так не работает
elem.style.top = parseInt(elem.style.left) + 100 + 'px';
console.log(elem.getBoundingClientRect())
}
go(proba)
go(proba2)//местоположение не меняется
</script>

@Plastun20 · 14.07.2020, 23:24

Schulzkafer, похоже так.
elem.style.left - это установка значения, а не получение. Для первого блока воспринимается как переменная со значением, а для второго - пусто.
Я в сложных случаях переходил на jQuery и не вникал в тонкости JS

@kalabuni · 15.07.2020, 01:32

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

elem.style.left - это установка значения, а не получение.

неверно!
значение свойства стиля left, как и вообще значения любых свойств стиля HTML-элемента скриптом можно как прочитать, так и установить (они все read/write)

но при "прочтении" есть нюанс:
всегда будет работать alert (getComputedStyle (elem).left);
а вот alert (elem.style.left); вернёт фактические пиксели только в двух случаях:
1) либо если в HTML-коде непосредственно в атрибуте style элемента значение этого свойства прописано <tag style="left: 123px;">
2) либо если значение этого свойства ранее установлено скриптом инструкцией elem.style.left = '123px';
соответственно, если значение свойства стиля не прописано в атрибуте style и не установлено скриптом, то вернётся пустота

ну и ещё (для общего развития): если элемент имеет абсолютное или фиксированное
позиционирование, но ему забыли прописать значение свойства left, то getComputedStyle (elem).left вернёт значение свойства marginLeft тела документа

Новые блоги и статьи Все статьи Все блоги /
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён 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. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .

@Plastun20 164 / 100 / 42 Регистрация: 23.06.2020 Сообщений: 228
	14.07.2020, 23:24
	Schulzkafer, похоже так. elem.style.left - это установка значения, а не получение. Для первого блока воспринимается как переменная со значением, а для второго - пусто. Я в сложных случаях переходил на jQuery и не вникал в тонкости JS 1

Вставка кода

Решение