CSS 如何使用javascript更改css属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15241915/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change css property using javascript
提问by Rohan Das
I want to change css property of class using javascript. What i actually want is when a div is hoverd, another div should become visible.
我想使用 javascript 更改类的 css 属性。我真正想要的是当一个 div 悬停时，另一个 div 应该变得可见。
My css is like..
我的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;
}
And html file is like..
和 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>
When hello1 div is hovered, bye1 div should be visible and similarly bye2 should appear when hello2 is hovered.
当 hello1 div 被悬停时，bye1 div 应该是可见的，同样当 hello2 被悬停时，bye2 应该出现。
回答by Ved
You can use styleproperty for this. For example, if you want to change border -
您可以style为此使用属性。例如，如果您想更改边框 -
document.elm.style.border = "3px solid #FF0000";
similarly for color -
同样的颜色 -
document.getElementById("p2").style.color="blue";
Best thing is you define a class and do this -
最好的事情是您定义一个类并执行此操作-
document.getElementById("p2").className = "classname";
document.getElementById("p2").className = "classname";
(Cross Browser artifacts must be considered accordingly).
（必须相应地考虑跨浏览器工件）。
回答by Dipesh Parmar
Use document.getElementsByClassName('className').style = your_style.
使用document.getElementsByClassName('className').style = your_style.
var d = document.getElementsByClassName("left1");
d.className = d.className + " otherclass";
Use single quotes for JS strings contained within an html attribute's double quotes
对包含在 html 属性双引号中的 JS 字符串使用单引号
Example
例子
<div class="somelclass"></div>
then document.getElementsByClassName('someclass').style = "NewclassName";
然后 document.getElementsByClassName('someclass').style = "NewclassName";
<div class='someclass'></div>
then document.getElementsByClassName("someclass").style = "NewclassName";
然后 document.getElementsByClassName("someclass").style = "NewclassName";
This is personal experience.
这是个人经验。
回答by Masoud
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'
}
回答by xpy
Just for the info, this can be done with CSS only with just minor HTML and CSS changes
仅供参考，这可以通过 CSS 完成，只需对 HTML 和 CSS 进行少量更改
HTML:
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:
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;
}
and the DEMO: http://jsfiddle.net/pavloschris/y8LKM/
回答by Derk Arts
This is really easy using jQuery.
使用 jQuery 这真的很容易。
For instance:
例如：
$(".left").mouseover(function(){$(".left1").show()});
$(".left").mouseout(function(){$(".left1").hide()});
I've update your fiddle: http://jsfiddle.net/TqDe9/2/
我已经更新了你的小提琴：http: //jsfiddle.net/TqDe9/2/
回答by CtrlX
With Jquery :
使用 Jquery ：
. 悬停（...）
$(".left").hover(function(){ $(".left1").toggle() } );
$(".right").hover(function(){ $(".right1").toggle()} );
