CSS 变量传值给JS

2020-02-25285次阅读javascriptcss模块css

CSS变量出现前,从CSS传值给JS非常困难,甚至需要借助一些Hack的手法。现在使用CSS变量,你可以直接通过JS获取变量值并进行修改:

.breakpoints-data {
  --phone: 480px;
  --tablet: 800px;
}
const breakpointsData = document.querySelector('.breakpoints-data');

// GET
const phone = getComputedStyle(breakpointsData)
    .getPropertyValue('--phone');

// SET
breakpointsData.style
    .setProperty('--phone', 'custom');

使用CSS变量,定制和动态切换网站主题非常简单方便:

html {
  --hue: 210; /* Blue */
  --text-color-normal: hsl(var(--hue), 77%, 17%);
  ...
}
html[data-theme='dark'] {
  --text-color-normal: hsl(var(--hue), 10%, 62%);
  ...
}

通过JS改变元素属性,动态切换主题:

document.documentElement.setAttribute('data-theme', 'dark')
document.documentElement.setAttribute('data-theme', 'light')

 

上一篇: CSS3中border-radius实现椭圆角还可以这样写  下一篇: js导出Excel表格  

CSS 变量传值给JS相关文章