如何使用 JavaScript 更改 CSS 属性

2022-01-22 00:00:00 hover javascript html css

我想使用 JavaScript 更改一个类的 CSS 属性.我真正想要的是当 <div> 悬停时，另一个 <div> 应该变得可见.

I want to change a CSS property of a class using JavaScript. What I actually want is when a <div> is hovered, another <div> should become visible.

.left,
.right {
  margin: 10px;
  float: left;
  border: 1px solid red;
  height: 60px;
  width: 60px
}

.left:hover,
.right:hover {
  border: 1px solid blue;
}

.center {
  float: left;
  height: 60px;
  width: 160px
}

.center .left1,
.center .right1 {
  margin: 10px;
  float: left;
  border: 1px solid green;
  height: 60px;
  width: 58px;
  display: none;
}

<div class="left">
  Hello
</div>
<div class="center">
  <div class="left1">
    Bye
  </div>
  <div class="right1">
    Bye1
  </div>
</div>
<div class="right">
  Hello2
</div>

当 hello1 div 悬停时，bye1 div 应该可见，同样，当 hello2 悬停时 bye2 应该出现.

When hello1 div is hovered, bye1 div should be visible and similarly bye2 should appear when hello2 is hovered.

推荐答案

您可以为此使用 style 属性.例如，如果你想改变边框 -

You can use style property for this. For example, if you want to change border - 

document.elm.style.border = "3px solid #FF0000";

类似的颜色 - 

 document.getElementById("p2").style.color="blue";

最好的办法是定义一个类并执行此操作 -

Best thing is you define a class and do this -

document.getElementById("p2").className = "classname";

(必须相应地考虑跨浏览器工件).

(Cross Browser artifacts must be considered accordingly).

相关文章