Question

如何用JS来改变CSS属性？

我有3张图片，css属性写成一个类了，border-color设置为grey，我想鼠标移到某张图上去的时候，那张图的border-color变成别的颜色，比如red，请问怎么弄啊

Answer 1

通过js来改变CSS属性，使用jQuery可以很方便的实现，像这样：

$("img").css('border-color','red');

就可以把边框颜色都变成红色。

这是针对此问题的测试页面

2、这是3张图片

<img src='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=975878983,2392470128&fm=11&gp=0.jpg'>

<img src='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=61343736,951557457&fm=11&gp=0.jpg'>

<img src='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1354592590,1762022981&fm=11&gp=0.jpg'>

3、这是图片的样式，边框默认为灰色。

img{

max-width:200px;

border-color:gray;

border-width:10px;

border-style:solid;

}

4、现在通过这几行用到jQuery的代码，控制图片边框根据鼠标移入移出边框变灰和变红。

$(function(){

$("img").on('mouseover',function(){

$(this).css('border-color','red');

}).on('mouseout',function(){

$(this).css('border-color','gray');

});

});

5、效果如图

Answer 2

活动作品如何在一个网页实现登录_注册表单切换？14分钟带你使用CSS+JS实现炫酷滑动切换效果

Answer 3

$("#你所操作对像的id").css("border","#000000 1px solid");
在什么时候想改变就把这句话放到你要触发的事件中

Answer 4

<img id="img" onmouseover="change('img','red')" onmouseout="change('img','grey')" />
<script>
function change(id,color){
document.getElementById(id).style.borderColor = color;
}
</script>

Answer 5

onmouseover="this.style.borderColor='red'" onmouseout="this.style.borderColor='grey'"

追问

不成功啊，this.style为空或不是对象

追答

这句话要加在你的图片上面

追问

我没描述清楚吧，我的onmouseover里有好几个方法，就这个实现不了了，我写成一个函数放在head里面了

追答

那么你就把对应的图片对象获取出来放到你那些函数中去就好了
比如在你的onmouseover的函数中添加：
var img= document.getElementById(‘img’);
img.style.borderColor='red';