如何用JS来改变CSS属性？

html-css016

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

主要原理是利用 css 变量设置颜色，用 js 动态修改变量，使颜色变化，兼容性如下；

实现换肤之前先要了解一下伪类选择器 :root ，还有css的 var() 函数和 setProperty() 函数

:root 是一个伪类，表示文档根元素，非 IE 及 IE8 及以上浏览器都支持，在 :root 中声明相当于全局属性，只要当前页面引用了 :root 所在的文件，都可以使用css var() 函数来引用；

语法

var() 函数，可以代替元素中，任何属性中的值的任何部分； var() 函数不能作为属性名、选择器或者其他除了属性值之外的值，这样做通常会产生无效的语法或者一个没有关联到变量的值；

语法

setProperty() 方法用于设置一个新的 css 属性，同时也可以修改 css 声明块中已存在的属性，兼容性如下；

语法

如果看了觉得有帮助的，我是@ 鹏多多11997110103 ，欢迎 点赞 关注 评论；END

往期文章

个人主页

1、直接更改，比如：

xID.style.display = "block" // 更改display属性，会覆盖css中的定义。

xID.style.display = ""      // 取消js更改display属性，以css样式为准。

这里的xID，是通过id获取的标签。当然，也可能是通过tagName之类的获取的标签。

这种方式，简单直接。但是要修改大量的样式的时候，不适合。所以，我更推荐第二种方式。

2、更改类名

xID.className = "xx   yy"

如果有多个类，就用空格隔开。前提，在样式中要有已有类的定义。比如这里的xx和yy类，在css中应该是写好的。

这种方式把所有的样式写在了css文件中，适合更改较多的样式以及炫酷的样式。js就只做一件事情：改类。至于这个类会把标签变成什么样子，交给css吧。

通过jquery也可以达到如上的效果：

$("#xID").css({

  fontSize:"12px",

  display:"block"

})  // 直接更改样式

$("#xID").addClass("xx")  // 增加删除类

$("#xID").removeClass("xx")