如何用JS来改变CSS属性？

html-css09

如何用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、效果如图

如果页面功能比较简单，根本没有必要为了使用元素选择器加载jquery，毕竟jquery-1.7.1.min.js文件就有91.6K字节了，很多功能用不上，额外增加了页面打开时需要下载的数据量，最简单的方法如下：

假设你的某个元素样式为 #nav{color=#000} ，该元素的id="nav" ，现在你需要使用一个click来修改color为其他值，你就在这个click的元素里直接写onclick="nav.style.color='#ff0000'" ，单引号里面就是你要的颜色值。如果要给某个元素(比如id为div1的)动态绑定click事件，就在js里面写div1.onclick=function () {

nav.style.color="你要的颜色"

}