如何使用JavaScript更改CSS属性
How to change CSS property using JavaScript
我想使用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>
当hello1div悬停时,bye1div应该是可见的,类似地,当hello2悬停时bye2应该出现。
您可以为此使用style
属性。例如,如果您想更改边界-
document.elm.style.border = "3px solid #FF0000";
类似于彩色
document.getElementById("p2").style.color="blue";
最好的方法是定义一个类并这样做-
document.getElementById("p2").className = "classname";
(必须相应地考虑跨浏览器工件(。
// 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
使用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";
这是个人经历
考虑以下示例:如果您想更改单个CSS属性(例如,将color更改为"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);
Spread运算符的工作原理类似,只是语法有点不同。
仅供参考,这可以用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/
使用jQuery真的很容易。
例如:
$(".left").mouseover(function(){$(".left1").show()});
$(".left").mouseout(function(){$(".left1").hide()});
我更新了你的小提琴:http://jsfiddle.net/TqDe9/2/
您可以这样使用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',
})
})
- 谷歌图表-如何更改整个表的css属性
- 将css属性替换为变量
- 使用Jquery/Javascript替换CSS属性
- 如何使用JavaScript查找未定义的CSS属性的值
- 在jquerymobile中设置按钮css属性的动画
- JavaScript无法提取引号css属性
- 使用AngularJS动态更改css属性
- 使用javascript获取具有特定CSS属性的所有元素
- 将css属性添加到对象的集合中
- 取消img的css属性宽度和高度(不能使用“auto”)
- CSS属性更改侦听器
- 如何更改与Backbone集合中的模型相关联的几个元素的css属性
- 如何使用java脚本或jQuery基于相同的特定css属性对元素进行分组
- 如何在不链接/jquery的情况下使用方法应用css属性数组
- 在 javascript css 属性中使用变量
- 在jQuery中链接时CSS属性不起作用
- jQuery检查CSS宽度是否大于0,然后添加CSS属性
- 使用循环增加css属性值
- 更改类所选空输入的CSS属性
- 无法查找元素'手动加载CSS文件时的CSS属性