JS 动态修改CSS 样式方法全局

html-css016

JS 动态修改CSS 样式方法全局,第1张

如何配置自行百度

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的属性实现了颜色和宽高的改变。