如何使用 JavaScript 更改 CSS 属性

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

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

389460 次浏览
小开

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

这是个人经历

小开

您可以为此使用 style属性

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

类似的颜色-

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

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

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

(必须相应地考虑跨浏览器构件)。

小开

使用 jQuery 非常简单。

例如:

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

我更新了你的小提琴: Http://jsfiddle.net/tqde9/2/

小开

仅仅为了获得信息，这可以用 CSS 来完成，只需要对 HTML 和 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;
}

和演示: http://jsfiddle.net/pavloschris/y8LKM/

小开

考虑下面的例子: 如果您想要更改单个 CSS 属性(比如，颜色为‘ blue’) ，那么下面的语句可以正常工作。

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

扩展运算符的工作原理类似，只是语法稍有不同。

小开 
// 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
小开

您可以这样使用 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',
})
})

提交答案