如何使用JavaScript更改CSS属性

Question

我希望用JavaScript更改类的CSS属性。实际上我想要的是当一个

被悬停时，另一个

应该变成可见状态。

.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 div上时，bye2 应该出现。

- Rohan Das

Answer 1

您可以使用style属性来实现此操作。例如，如果您想更改边框 -

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

同样适用于颜色 -

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

最好的方法是定义一个类并执行以下操作 -

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

(必须相应地考虑跨浏览器问题)。

- Ved

---

更新或添加新类 - document.getElementById("p2").className = "classname"; 不是当前的做法。请参见此处的答案 - https://dev59.com/6HVC5IYBdhLWcg3wvT7g - Dan W.

Answer 2

// select element from DOM using *const*
const sample = document.getElementById("myid"); // using const
// or you can use *var*
var sample = document.getElementById("myid"); // using var

// change css style
sample.style.color = 'red'; // Changes color, adds style property.
// or (not recomended)
sample.style = "color: red"; // Replaces all style properties. NOT RECOMENDED

- Tiago Rangel de Sousa

Answer 3

使用document.getElementsByClassName('className').style = your_style。

var d = document.getElementsByClassName("left1");
d.className = d.className + " otherclass";

在html属性的双引号中使用单引号来表示JS字符串

示例

<div class="somelclass"></div>

然后执行 document.getElementsByClassName('someclass').style = "新类名";

<div class='someclass'></div>

然后document.getElementsByClassName("someclass").style = "NewclassName";

这是个人经验。

- Dipesh Parmar

---

"getElementByClassName" 并不存在。 - Derek 朕會功夫

@Derek https://developer.mozilla.org/zh-CN/docs/DOM/document.getElementsByClassName - Dipesh Parmar

重点是您在Element和Class之间忘记了一个s... 正确应该是 getElementsByClassName。 - Derek 朕會功夫

我非常确定在这种情况下单引号和双引号没有区别（浏览器会将它们解释为相同的内容；尝试在Firefox中使用单引号右键单击元素并选择“检查元素”，你会发现它已经变成了双引号）。只有在需要嵌套时才有区别，例如 document.querySelector('input[type="checkbox"]')。 - Adam Katz

这仍然是错误的，getElementsByClassName 返回一个元素列表而不是单个元素。你需要对其进行迭代，并对每个元素应用更改。 - Arthur Khazbs

这么错误的答案怎么会得到那么多赞？ - CertainPerformance

Answer 4

考虑以下示例： 如果您想更改单个CSS属性（例如将颜色更改为“蓝色”），则下面的语句可以正常工作。

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

但是，对于更改多个属性的情况，更健壮的方法是使用 Object.assign() 或者 对象扩展运算符 {...} ；

请见下文：

const ele=document.getElementById("ele_id");
const custom_style={
    display: "block",
    color: "red"
}

//Object.assign():
Object.assign(ele.style,custum_style);

展开运算符的工作方式类似，只是语法略有不同。

- Apurva07

Answer 5

仅供参考，这可以通过仅进行轻微的HTML和CSS更改来仅使用CSS完成

HTML：

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

CSS：

.left, .right{
    margin:10px;
    float:left;
    border:1px solid red;
    height:60px;
    width:60px
}
.left:hover, .right:hover{
    border:1px solid blue;
}
.right{
     float :right;
}
.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;
}
.left:hover ~ .center .left1 {
    display:block;
}

.right:hover ~ .center .right1 {
    display:block;
}

还有 DEMO：http://jsfiddle.net/pavloschris/y8LKM/

- xpy

Answer 6

使用jQuery非常简单。

例如：

$(".left").mouseover(function(){$(".left1").show()});
$(".left").mouseout(function(){$(".left1").hide()});

我已经更新了你的代码片段： http://jsfiddle.net/TqDe9/2/

- Derk Arts

---

这只是显示或隐藏元素，不会更改任何CSS。 - AksLolCoding

Answer 7

你可以使用jQuery来实现这个功能。

$('.left, .right').on('mouseenter', function(e) {
    if ($(this).attr('class') == 'left1') {
        $('.left1').css({
            /* 'visibility': 'visible', */
            'display': 'block',
        })
    } else if ($(this).attr('class') == 'left1') {
        $('.right1').css({
            /* 'visibility': 'visible', */
            'display': 'block',
        })
    }
})

或者你可以像这样使用它

对于第一个要求

$('.left').on('mouseenter', function(e) {
    $('.left1').css({
        /* 'visibility': 'visible', */
        'display': 'block',
    })
})

对于第二个要求

$('.right').on('mouseenter', function(e) {
    $('.right1').css({
        /* 'visibility': 'visible', */
        'display': 'block',
    })
})

- Dhia Shalabi