如何用JS来改变CSS属性？

html-css022

如何用JS来改变CSS属性？,第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、效果如图

className属性。

据CSDN博客显示，c修改元素类名的方式操作元素的css用className属性。

className属性是一个可读可写的的属性，若只要是元素节点都有className属性，可以使用className属性得到一个元素的class属性并且还能用于赋值操作。

修改css步骤:

1.按下键盘f12，进行定位，找到自己修改的地方，而在右侧对应的就是某个div的css样式

2.修改自己想要的样式，要是不知道可以自己在百度上找一下代码

3.修改之后看一下效果。要是修改的是自己需要的样式，则找到对应的css路径

4.进行修改刚才的样式(修改方法可以通过后台直接找到对应文件进行修改，也可以用flashfxp，进行文件互传，来修改)，并保存。

5.之后到前台刷新就可以看到效果了。