html 赋值变量 切换主题,使用css3原生变量实现主题换肤

变量的声明

声明变量的时候，变量名前面要加两根连词线(--)。

body {

--color:red;

--background-color:#545454;

}

:root {

/* :root伪类选择器表示文档根元素 */

--backgroundColor: #f0f0f0;

--color: #232323;

}

CSS 变量(CSS variable)又叫做“CSS 自定义属性"(CSS custom properties)，变量名大小写敏感，--header-color和--Header-Color是两个不同变量。

变量的使用

var()函数用于读取变量。

color: var(--color,#545454); // 第二个只为默认值

注意，变量值只能用作属性值，不能用作属性名。

变量值的类型

如果变量值是一个字符串，可以与其他字符串拼接。

--bar: 'hello';

--foo: var(--bar)' world';

如果变量值是数值，不能与数值单位直接连用。

.foo {

--gap: 20;

/* 无效 */

margin-top: var(--gap)px;

}

上面代码中，数值与单位直接写在一起，这是无效的。必须使用calc()函数，将它们连接。

.foo {

--gap: 20;

margin-top: calc(var(--gap) * 1px);

}

如果变量值带有单位，就不能写成字符串。

/* 无效 */

.foo {

--foo: '20px';

font-size: var(--foo);

}

/* 有效 */

.foo {

--foo: 20px;

font-size: var(--foo);

}

代码实现主题换肤

页面

header

change theme

样式

:root {

/* :root伪类选择器表示文档根元素 */

--backgroundColor: #f0f0f0;

--color: #232323;

}

.header {

background-color: var(--backgroundColor);

color: var(--color);

padding: 30px;

margin: 30px;

}

事件

通过js来动态设置css变量

document.body.style.setProperty('--backgroundColor', '#f0f0f0');

document.body.style.setProperty('--color', '#232323');

function handleChange() {

const color = document.body.style.getPropertyValue('--color').trim();

if (color === '#232323') {

document.body.style.setProperty('--backgroundColor', '#000');

document.body.style.setProperty('--color', '#fff');

} else {

document.body.style.setProperty('--backgroundColor', '#f0f0f0');

document.body.style.setProperty('--color', '#232323');

}

}

标签：换肤,css3,style,原生,--,body,color,var,foo

来源： https://www.cnblogs.com/Lewiskycc/p/14363249.html