如何使用javascript更改css屬性

我想使用javascript更改類的css屬性。我真正想要的是當div被hoverd時，另一個div應該可見。如何使用javascript更改css屬性

我的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格懸停，bye1格應該是可見的，同樣bye2時hello2是應該出現徘徊。

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

來源

2013-03-06 Rohan Das

使用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";

這是個人經驗。

來源

2013-03-06 08:03:42

有作爲'getElementByClassName'沒有這樣的事情。 – 2013-03-06 08:04:15

@Derek https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByClassName – 2013-03-06 08:05:12

重點是你忘了'Element'和'Class'之間的's' ...它應該是'getElementsByClassName '。 – 2013-03-06 08:06:08

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

來源

2013-03-06 08:04:38 masoud

你所評論的非JQuery代碼將不起作用（'getElementsByClassName' - 注意複數返回一個NodeList，而不是元素）。等價的代碼（我認爲是JQuery使用的代碼）應該是'var hello = document.querySelector（'。right'）' – 2016-06-06 18:09:25

您可以使用style屬性爲此。例如，如果你想改變邊界 -

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

同樣的顏色 -

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

最好的事情是你定義一個類並做到這一點 -

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

（十字瀏覽器工件必須相應考慮）。

來源

2013-03-06 08:05:22 Ved

是的，但是，考慮到p2作爲ID會起作用。 – Ved 2013-03-06 08:11:59

不，它不會... – 2013-03-06 08:13:29

哦，真的嗎？ '' 'alert（document.getElementById（「p2」）.value）;' 對我來說工作得很好。 – Ved 2013-03-06 08:55:03

-2

使用jQuery這非常簡單。

例如：

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

我已經更新您的提琴： http://jsfiddle.net/TqDe9/2/

來源

2013-03-06 08:05:59

使用jQuery：
。hover (...)

所以做：

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

Go to jsFiddle to see in action

來源

2013-03-06 08:10:51 CtrlX

[JQuery .toogle（） - 版本已棄用：1.8，刪除：1.9]（http://api.jquery.com/toggle-event/）。 – Vucko 2013-03-06 08:13:38

toggle（）仍然在2.0中工作：[link]（http://api.jquery.com/toggle/） – CtrlX 2013-03-06 08:20:40

只爲信息，這可能與僅只是輕微的HTML和CSS 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; 
}

和DEMO：http://jsfiddle.net/pavloschris/y8LKM/

來源

2013-03-06 09:18:38 xpy

如何使用javascript更改css屬性

回答

相關問題