자바 스크립트를 사용하여 CSS 속성을 변경하는 방법

Question

자바 스크립트를 사용하여 클래스의 CSS 속성을 변경하고 싶습니다. 내가 실제로 원하는 것은 div가 가리키면 다른 div가 표시되어야한다는 것입니다.

내 CSS는 hello1 div에 마우스를 가져 때

<div class="left"> 
    Hello 
</div> 
<div class="center"> 
     <div class="left1"> 
      Bye 
    </div> 
     <div class="right1"> 
      Bye1 
    </div>  
</div> 
<div class="right"> 
    Hello2 
</div> 

이

, DIV bye1 hello2 일 때 나타납니다 유사 bye2 볼 수 있고해야 ..

.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 파일과 같은 것입니다 .. 같은입니다 호버.

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

Answer 1

사용 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";

이것은 개인적인 경험입니다.

Answer 2

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' 
} 

Answer 3

여기에는 style 속성을 사용할 수 있습니다.

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

(크로스 - 색상 유사

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

- -이

이

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

이

가장 좋은 것은 당신이 클래스를 정의하고 수행 예를 들어, 당신은 국경을 변경하려는 경우 따라서 브라우저 아티팩트를 고려해야합니다.

Answer 4

jQuery를 사용하면 정말 쉽습니다. 예를 들어

: http://jsfiddle.net/TqDe9/2/

Answer 5

jQuery로 :

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

나는 당신의 바이올린을 업데이트했습니다.hover (...)

그렇게 :

$(".left").hover(function(){ $(".left1").toggle() }); 
$(".right").hover(function(){ $(".right1").toggle()}); 

Go to jsFiddle to see in action

Answer 6

그냥 정보를 원하시면,이는 단지 약간의 HTML 및 CSS와 CSS와 함께 할 수는

HTML을 변경합니다 :

(210)

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

와 DEMO : http://jsfiddle.net/pavloschris/y8LKM/