[英]How to change CSS property using JavaScript
我想使用 JavaScript 更改 class 的 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 应该出现。
您可以为此使用style
属性。 例如,如果您想更改边框 -
document.elm.style.border = "3px solid #FF0000";
同样的颜色 -
document.getElementById("p2").style.color="blue";
最好的事情是您定义一个类并执行此操作-
document.getElementById("p2").className = "classname";
(必须相应地考虑跨浏览器工件)。
使用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";
这是个人经验。
// 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
仅供参考,这可以通过 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;
}
考虑以下示例:如果您想更改单个 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);
展开运算符的工作方式类似,只是语法略有不同。
你可以像这样使用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',
})
})
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'
}
使用 jQuery 这真的很容易。
例如:
$(".left").mouseover(function(){$(".left1").show()});
$(".left").mouseout(function(){$(".left1").hide()});
我已经更新了你的小提琴: http : //jsfiddle.net/TqDe9/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.