Выбор элемента по классу, а затем его перемещение

Question

Мне нужно выбрать определенный div по его имени.

После его выбора мне нужно переместить его на 100 пикселей.

Вот что я пытался до сих пор:

HTML

<div style="z-index:101; position: absolute; 
left: 0px; top: 300px; width: 20px; height:450px; 
padding: 0px; border: 0px;" class="wrapper" >Content</div> 

JS

var class = document.getElementByClassName("wrapper"); 
var div = class[0]; 
div.style.top = '100px'; 

Не уверен, если я понимание нодлистов правильно.

JSFiddle

Answer 1

1. Вы отсутствуют в getElementsByClassName() в s;

2. В качестве имени переменной вы использовали class, но это зарезервированное слово. Просто назовите это чем-то другим.

3. Чтобы переместить его, измените свойство .style.top (300-100 = 200px).

Исправлен код:

var wrapper = document.getElementsByClassName("wrapper"); 
 
var div = wrapper[0]; 
 
div.style.top = '200px';

<div style="z-index:101; position: absolute; left: 0px; top: 300px; width: 20px; height:450px; padding: 0px; border: 0px;" class="wrapper" >Content</div>

Answer 2

Почему это не работает?

Класс токена зарезервирован и не может использоваться как имя переменной. Во-вторых, вы сделали опечатку в getElementsByClassName().

Решение

Мы можем использовать document.querySelector() вместо того, чтобы и опустить массив, так как он всегда обеспечивает первый матч, который работает в вашем случае.

document.querySelector('.wrapper').style.top = '100px'; 

Чтобы переместить его вверх 100px из исходного положения использовать

var tE = document.querySelector('.wrapper'); 
tE.style.top = Math.max(parseInt(tE.style.top) - 100, 0).toString() + 'px';