1.scss文件定义变量
2.js中更改$textColor 变量的值
都是获取DOM
通过DOM分别修改当前DOM样式属性值、
当前DOM整体css样式、
修改当前DOM的className类名、
将link引入的标签作为DOM 修改link的href，从而修改引用的样式表。
详情转自： https://blog.csdn.net/wx13227855087/article/details/81391787
这个是可以实现的额，js通过修改浏览器的DOM对象是可以修改css样式的值的。
代码实例如下：
<!doctype html><html>
<head>
<meta charset="UTF-8">
<title>变色</title>
<style type="text/css">
#div1{width: 200px height: 200px background: #ccc}
</style>
<script type="text/javascript">
function chan(){
var change=document.getElementById('div1')
change.style.width="100px"
change.style.height="50px"
change.style.background="#000000"
}
</script>
</head>
<body>
<div id="div1"></div>
<input type="button" value="改变" onclick="chan()">
通过更改css的属性实现了颜色和宽高的改变。
通过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、效果如图
