Question

我想使用javascript更改类的css属性。我真正想要的是当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;
}

.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;
}

html文件就像......

<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应该出现。

http://jsfiddle.net/rohan23dec/TqDe9/1/

Answer 1

您可以使用style属性。例如，如果要更改边框 -

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

同样适用于颜色 -

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

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

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

（必须相应地考虑跨浏览器工件）。

Answer 2

使用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 = "NewclassName";

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

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

这是个人经历。

Answer 3

var hello = $('.right') // or var hello = document.getElementByClassName('right')
var bye = $('.right1')
hello.onmouseover = function()
{
    bye.style.visibility = 'visible'
}
hello.onmouseout = function()
{
    bye.style.visibility = 'hidden'
}

Answer 4

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

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

但是，要更改多个属性，更健壮的方法是使用Object.assign()或object spread operator {...};

请参见下文：

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

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

Spread运算符的工作原理类似，只是语法略有不同。

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/

Answer 6

使用jQuery非常简单。

例如：

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

我更新你的小提琴： http://jsfiddle.net/TqDe9/2/

Answer 7

用Jquery：
。hover (...)

所以：

$(".left").hover(function(){ $(".left1").toggle() } );
$(".right").hover(function(){ $(".right1").toggle()} );

Go to jsFiddle to see in action

如何使用javascript更改css属性

7 个答案:

请参见下文：