如何用JS来改变CSS属性?

我有3张图片,css属性写成一个类了,border-color设置为grey,我想鼠标移到某张图上去的时候,那张图的border-color变成别的颜色,比如red,请问... 我有3张图片,css属性写成一个类了,border-color设置为grey,我想鼠标移到某张图上去的时候,那张图的border-color变成别的颜色,比如red,请问怎么弄啊 展开
 我来答
小傅说数码
2018-06-28 · 数码小专家,专注分享数码知识
小傅说数码
采纳数:432 获赞数:29257

向TA提问 私信TA
展开全部

通过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、效果如图

落允玦E9
2021-03-02 · 超过30用户采纳过TA的回答
知道答主
回答量:136
采纳率:88%
帮助的人:21.4万
展开全部

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

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
1989yuanlina
2011-08-16
知道答主
回答量:58
采纳率:0%
帮助的人:26.2万
展开全部
$("#你所操作对像的源袜id").css("border","#000000 1px solid");
在什么时候想改变就把这句话放到你要触发的事猛悔件中枝裂正
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
手机用户68006
2011-08-16 · TA获得超过380个赞
知道答主
回答量:125
采纳率:0%
帮助的人:115万
展开全部
<img id="img" onmouseover="change('img','red')" onmouseout="change('img','镇信悔grey')" /坦并>
<script>
function change(id,color){
document.getElementById(id).style.borderColor = color;
}
</script>御正
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
guxi20000
2011-08-16 · TA获得超过287个赞
知道小有建树答主
回答量:280
采纳率:0%
帮助的人:235万
展开全部
onmouseover="this.style.borderColor='卖态中中山red'" onmouseout="this.style.borderColor='grey'闭顷"
更多追问追答
追问
不成功啊,this.style为空或不是对象
追答
这句话要加在你的图片上面
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(4)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式