CSS自定义属性与前端页面的主题切换

1
2
3
4
5
6
7
body {
  /* 声明自定义属性 */
  --bg-color: #f00;
  /* 使用 */
  background-color: var(--bg-color);
}

1
2
3
4
5
6
7
8
9
div {
  --1: #0f0;
  --背景: yellow;
  --Fontsize: 20px;
  color: var(--1);
  font-size: var(--Fontsize, 30px);
  background-color: var(--背景);
}

1
2
3
4
5
6
7
8
{
  --1: #0f0;
  --2: center;
  --f: '测试';
  --n: 22;
  --z: 12px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
:root {
  --color: red;
}
body {
  --bg-color: #ddd;
  color: --color;
  background-color: var(--bg-color);
  width: var(--width); /*自定义属性变量无效*/
}
body .header {
  --width: 1000px;
  color: var(--color);
  background-color: var(--bg-color);
  width: var(--width);
}

1
2
3
4
5
6
7
div {
  --1: #0f0;
  --border-color: yellow;
  color: var(--1);
  border: 1px solid var(--border-color);
}

1
2
3
4
div {
  font-size: var(--Fontsize, 30px);
}

1
2
3
4
5
6
<div style="--text-color: 11px;">
  <span style="color: var(--text-color, #f00);">欢迎进入我们的网站</span>
  <span style="color: var(--1color, #f00);">今天是星期天</span>
  <span style="color: var(--1color, 22px);">晴到多云</span>
</div>

1
2
3
4
5
6
7
div {
  --1: #0f0;
  --背景: var(--1);
  color: var(--1);
  border: 1px solid var(--背景);
}

1
2
3
4
5
6
7
:root {
  --wait-copy: '，请复制';
}
div:after {
  content: '正文'var(--wait-copy);
}

1
2
3
4
5
6
7
8
9
:root {
  --size: 5;
  --width: calc(100px * 5);
}
.div {
  width: var(--width);
  font-size: calc(var(--size) * 10px);
}

1
2
3
4
5
<div style="--text-color: red;">
  <span style="color: var(--text-color);">欢迎进入我们的网站</span>
  <span class="week">今天是星期天</span>
</div>

1
2
3
4
.week {
  color: var(--text-color);
}

1
2
3
4
5
6
7
8
9
:root {
  --color: red;
}
body {
  --color: green;
  --bg-color: #ddd;
  background-color: var(--bg-color);
}

1
2
3
4
5
6
7
<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" fill-rule="evenodd">
    <circle stroke="var(--color)" cx="16" cy="16" r="12"/>
    <path d="M16.5 21.5c.672 0 1.5-.084 1.5-.5V11a1 1 0 0 0-1-1h-3.5a.5.5 0 0 0-.5.5v1.112c0 .223.18.404.404.404.135 0 .667.161 1.596.484V21c0 .416.828.5 1.5.5Z" fill="var(--color)" fill-rule="nonzero"/>
  </g>
</svg>

1
2
3
4
5
6
7
8
9
10
11
/*父元素*/
.parent {
  overflow:hidden;
}

/*svg图标*/
img.icon {
  transform: translateX(-80px);
  filter: drop-shadow(red 80px 0);
}

1
2
3
4
:root {
  --color: red;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const root = getComputedStyle(document.documentElement)
// 获取全局属性值
const color1 = root.getPropertyValue('--color').trim()
// 设置属性值
document.documentElement.style.setProperty('--color', 'green')
const color2 = root.getPropertyValue('--color').trim()

console.log(color1, color2) // red green

// 给元素设置样式
const body = document.querySelector('body')
document.querySelector('body').style.backgroundColor = color2
// body的背景色将被设置为绿色

1
2
3
<div id="welc" style="-text-pos: center;">
</div>

1
2
3
4
5
6
// 获取welc元素下定义的属性值，给body设置该值
const welc = document.getElementById('welc')
const align = welc.style.getPropertyValue('--text-pos')
// welc.style.setProperty('--text-pos', 'left')
document.querySelector('body').style.textAlign = align

1
2
3
4
5
6
7
:root[theme="black"] {
  --color: #000;
}
:root[theme="white"] {
  --color: #fff;
}

1
2
3
4
5
6
7
8
9
const setDocumentTheme = (theme = 'white') => {
  const docElm = document.documentElement
  if (!docElm.hasAttribute('theme')) {
    docElm.setAttribute('theme', theme)
  } else {
    docElm.removeAttribute('theme')
  }
}

1
2
3
// 是否支持自定义属性
window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)

1
2
3
4
5
6
@supports ((--a: 0)) {
  /* 支持 */
}
@supports (not (--a: 0)) {
  /* 不支持 */
}