如何使用javascript更改css属性 [英] How to change css property using javascript

问题描述

我想使用javascript更改类的css属性。我真正想要的是当一个div是hoverd，另一个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被悬浮时，

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

解决方案

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

  document.elm.style.border =3px solid＃FF0000; 
 >  document.getElementById（p2）。style.color =blue; 
  
最好的方法是定义一个类并执行 -  
 
 
 
  document.getElementById（p2）。className =classname;  
 
 
 
必须相应地考虑浏览器工件）。
 
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.

My css is like..
.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..
<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.

http://jsfiddle.net/rohan23dec/TqDe9/1/
解决方案
You can use style property for this. For example, if you want to change border - 
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"; 

(Cross Browser artifacts must be considered accordingly).

                        
这篇关于如何使用javascript更改css属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！