按类选择元素，然后移动它

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';

不确定我是否正确理解NodeLists。

JSFiddle

Answer 1

1。您错过s中的getElementsByClassName();

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';