Javascript 尝试在使用js单击时更改div的位置

我正在编辑一个用于平板电脑的网站，但显然我的：hover伪类都不起作用

我想向上移动一个div，以显示与悬停时相同数量的文本，但我希望在单击“up\u down\u icon.png”时发生

这是我的html：

<div class="home_1">
    <div class="h_1_text_box">
        <h3>Our Concept</h3>
        <img class="icon" src="up_down_icon.png">
        <p>Text here</p>
    </div>
</div>

实际上，我所需要知道的就是如何将位置的改变应用到.h_1_文本框，具体地说，将其向上移动84px

答案可能会非常简单，我觉得问这个问题有点傻，但我的代码有点长，让我想一想如何应用JS。我还没有找到足够具体的东西来帮助我。如果我必须更改HTML中任何内容的顺序，我不介意

---

谢谢您的帮助。

您可以使用简单的JS-

document.getElementById("myBtn").style.left = "100px";
document.getElementById("myBtn").style.top = "100px";

---

只需在图标中添加一个事件侦听器，它将侦听单击事件。 然后您只需要向父元素添加一个css类。您已经在css中定义了所需的一切

这里有一个例子

var upDownIcon=document.getElementsByClassName（'icon'）。项（0）；
upDownIcon.addEventListener（'click'，函数（e）{
e、 target.parentNode.classList.toggle（'move_up_down'）；
}，false）

.h\u 1\u文本框{
背景色：rgba（0,0,0,0.5）；
填充：12px 16px 24px 16px；
颜色：#ffffff；
字体系列：富兰克林哥特式；
位置：相对位置；
顶部：100px；
过渡：0.5s缓解；
}
.h_1_文本框。上下移动{
位置：相对位置；
顶部：0px；
背景色：rgba（0,0,0,0.9）；
}
/*
.h_1_文本框：悬停{
位置：相对位置；
顶部：171像素；
背景色：rgba（0,0,0,0.9）；
}
*/
.图标{
宽度：24px；
高度：24px；
位置：绝对位置；
顶部：11px；
左：560px；
过渡：0.5s缓解；
/*这只不过是暂时的*/
字号：26px；
光标：指针；
}
.h_1_text_box.move_up\u down>。图标{
变换：旋转（-180度）；
}
/*
.h_1_文本框：悬停>.icon{
变换：旋转（-180度）；
}
*/

我们的理念
⇅
此处文本

这段代码是使用JS实现这一点的一千种方法之一：

函数toogleClass（）{
var divhasClass=document.getElementById（“onlyTouchDevices”）.classList；
if（divhasClass.contains（“showMore”））{
divhasClass.remove（“showMore”）；
}否则{
添加（“showMore”）；
}
}

.home\u 1{
宽度：600px；
高度：300px；
保证金：0px 0px 96px 0px；
溢出：隐藏；
背景颜色：浅蓝色；
背景尺寸：600px 300px；
边界半径：8px；
}
.h_1_文本框{
背景色：rgba（0,0,0,0.5）；
填充：12px 16px 24px 16px；
颜色：#ffffff；
字体系列：富兰克林哥特式；
位置：相对位置；
顶部：255px；
过渡：0.5s缓解；
}
.showMore{
位置：相对位置；
顶部：171像素；
背景色：rgba（0,0,0,0.9）；
}
.图标{
宽度：24px；
高度：24px；
位置：绝对位置；
顶部：11px；
左：560px；
过渡：0.5s缓解；
}
.h_1_文本框：悬停>.icon{
变换：旋转（-180度）；
}
h3{
差额:0 18 0 ;；
字体重量：较轻；
-之前的webkit保证金：0px；
-网络工具包后的利润率：18px；
-webkit保证金开始：0px；
-webkit页边距结束：0px；
}

我们的理念
此处文本

也许这会对您有所帮助，请运行我的代码片段并将其签出

$（'.icon'）。单击（函数（）{
$（'.h_1_text_box'）.css（'position'，'relative'）；
$（'.h_1_text_box'）.css（'top'，'171px'）；
$（'h_1_text_box'）.css（'background-color'，'rgba（0,0,0,0.9）'）；
})

.home\u 1{
宽度：600px；
高度：300px；
保证金：0px 0px 96px 0px；
溢出：隐藏；
背景颜色：浅蓝色；
背景尺寸：600px 300px；
边界半径：8px；
}
.h_1_文本框{
背景色：rgba（0,0,0,0.5）；
填充：12px 16px 24px 16px；
颜色：#ffffff；
字体系列：富兰克林哥特式；
位置：相对位置；
顶部：255px；
过渡：0.5s缓解；
}
.图标{
宽度：24px；
高度：24px；
位置：绝对位置；
顶部：11px；
左：560px；
过渡：0.5s缓解；
}
.h_1_文本框：悬停>.icon{
变换：旋转（-180度）；
}
h3{
差额:0 18 0 ;；
字体重量：较轻；
-之前的webkit保证金：0px；
-网络工具包后的利润率：18px；
-webkit保证金开始：0px；
-webkit页边距结束：0px；
}

我们的理念
此处文本

将您的代码添加到fiddle中，这样我们就可以得到一个想法。它非常棒，工作非常完美。我能麻烦你问几个问题让我的头脑清醒一下吗？第（0）项的目的是什么？“假”有什么作用？这个函数可以被调用吗？如中所示，特定于事件（例如textBoxGrow）

GetElementsByCassName

返回一个类似数组的

HTMLCollection

。

item（0）

方法将从

HTMLCollection

获取第一个元素。这里有更多的信息。您可能还想退房。我在事件侦听器中使用了匿名函数，但您也可以传递命名函数。只需定义

函数textBoxGrow（event）{…

并将其传递给

…addEventListener（'click'，textBoxGrow，false）

document.getElementById("myBtn").style.left = "100px";
document.getElementById("myBtn").style.top = "100px";