动态修改css中:root定义的变量-换肤、主题色

html-css0298

动态修改css中:root定义的变量-换肤、主题色,第1张

前端中有用到需要设置主题颜色，根据用户喜欢实现换肤的可以使用css中:root定义变量的方式，或者使用动态切换引入的外部css样式表实现，这里着重记录下动态修改css中:root定义的变量实现换肤：

这里定义变量必须是以'--'开头，然后其他页面的样式表就可以直接引用这个变量了

至此就完成了动态修改:root变量实现换肤了，具体的应用场景中我们应该是在页面上操作，选中需要的肤色然后修改:root定义的变量值，考虑到浏览器刷新会重置原始状态的值，这里要结合本地存储方式记住选中的肤色，具体的实现参考：

CSS 是静态的 不能使用 js 的变量

但是你可以使用js 去修改 css 的值

var you_var_height = 100

var you_var_width = 100

//写法1 纯JavaScript

var div1 = document.getElementById('ID00001')

div1.style.height=you_var_height

div1.style.width=you_var_width

//写法2 jquery

$(document).ready(){

$('#ID00001').css('height',you_var_height)

$('#ID00001').css('height',you_var_width)

}

这个是可以实现的额，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的属性实现了颜色和宽高的改变。