13518219792
JS可以使用css属性来进行样式修改，并且不仅可以修改单一属性，也可以同时修改多个属性。
创新互联建站主营水城网站建设的网络公司,主营网站建设方案,成都app开发,水城h5微信平台小程序开发搭建,水城网站营销推广欢迎水城等地区企业咨询
案例
以下小案例使用JQuery作为演示。
前提： html页面首先必须引入JQuery，放置在body体最后的位置。例如：
script type="text/javascript" src=""/script
html部分代码
p
我是一个段落，我没有背景颜色的，但是JQuery会给我增加背景颜色。
/p
button
点击我，给上面段落添加黄色背景颜色。
/button
JQuery代码
$("button").click(function(){
$("p").css("background-color", "yellow");
});
修改多个属性
$("button").click(function(){
$("p").css({"background-color": "yellow", "font-size": "200%"});
});
结论与解释：
首先使用Jquery选择器进行元素选择 - $("button")
为该元素绑定点击事件 - click
click中的匿名函数修改css属性。
在css属性的修改中，p段落有了黄色背景； 多个属性修改，不但有了黄色背景而且字体是之前的两倍大小。
注意事项：
可以不用非要绑定事件，在本案例中，绑定事件是为了更好地演示Jquery如何操作css属性。
修改单一属性和多个属性的写法是有区别的，多个属性使用{},属性与值之间用：分割，属性与属性之间用，分割。
通过js来改变CSS属性，使用jQuery可以很方便的实现，像这样：
$("img").css('border-color','red');
就可以把边框颜色都变成红色。
这是针对此问题的测试页面
2、这是3张图片
img src=';fm=11gp=0.jpg'
img src=';fm=11gp=0.jpg'
img src=';fm=11gp=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、效果如图
如何配置自行百度
1.scss文件定义变量
2.js中更改$textColor 变量的值
都是获取DOM
通过DOM分别修改当前DOM样式属性值、
当前DOM整体css样式、
修改当前DOM的className类名、
将link引入的标签作为DOM 修改link的href，从而修改引用的样式表。
详情转自：
