如何使用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/

答

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

这是个人经验。

有作为'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' 
}

你所评论的非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";

（十字浏览器工件必须相应考虑）。

是的，但是，考虑到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

答

使用jQuery这非常简单。

例如：

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

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

答

使用jQuery：
。hover (...)

所以做：

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

Go to jsFiddle to see in action

[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/

如何使用javascript更改css属性

相关推荐