CSS变量

  2016年CSS变量已经完整在Chrome FireFox和IE中使用,类似许多Javascript和CSS新特性,可能你很难想象如何使用CSS变量,我们所有经验都来自于无变量的世界,这里我们从如何使用CSS变量进行Javascript和CSS通讯讲起。

什么是CSS变量?

CSS变量增加了CSS两个新概念,你能够使用两个连接号“--”作为开头定义定制的属性:

html {    --main-color: #06c  }

这里两个“--”是作为main-color开始,这定义了一个CSS变量,那么以后我们就可以引用这个变量名main-color:

a {    color: var(--main-color)  }

这样你能方便在一个地方改变颜色 大小等属性。

有趣的是,CSS变量遵循CSS属性的继承规则,比如也许我们想在blog中调整main color:

.blog-post {    --main-color: #9b806b  }

结合CSS变量和calc()表达式会有惊人的效果:

html {    --header-height: 40px  }    
.page-content {
    top: calc(var(--header-height) + 10px)  
}

CSS变量和JavaScript

CSS变量能够让我们通过Javascript更好地控制CSS数值,比如:

.my-element {    height: var(--element-height);    width: 40px;    color: #9b806b;  }

在Javascript中,我们能够将CSS变量设置为我们想要的值:

myElement.style.setProperty('--element-height', height + 'px')

再比如结合calc:

.my-element {    height: calc(var(--element-height) * 1px);  }

那么在javascript中设置CSS变量:

myElement.style.setProperty('--element-height', height)

以上展示了如何通过CSS变量实现Javascript和样式之间的通讯互相调用。

 

Javascript专题

 

猜你喜欢