整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
ode
HTML页面开发中，我们常常会设置很多样式和效果，写很多CSS样式。一般情况，对于像我这种对前端不熟的菜鸟，很多样式都是一点一点调出来，然后就放在css文件中。这样对于常做Java后端开发接受不了太多魔法值的人来说，总感觉css中给各种dom设置固定的尺寸、位置或距离等，心里很不舒服。
假设有这样一个场景，我们有两个dom（A和B），A的宽度为100px，B的宽度为500-A的宽度。在某个条件下，A的宽度要调整为120px，B仍为500-A的宽度。那么最笨的办法就是在js事件中先改变A的宽度后，接着再调整B的宽度，需要两步。
jquery 设置dom宽度
现在，我们有了CSS自定义属性，在css文件中这样定义自定义属性
css自定义属性声明
然后可以像变量一样使用
使用css自定义属性设置宽度
那么回到上面那个场景，我们只需要在js事件中改变自定义属性的值即可，如下图
js中改变css自定义属性
当然，以上只是一种场景，有了自定义属性可以解决很多问题，比如动态调整主题。感兴趣的同学可以研究研究。
文来自 Advanced CSS Theming with Custom Properties and Javascript - (https://www.sitepoint.com/css-theming-custom-properties-javascript/)
在关于CSS主题的本教程中，我们将使用CSS自定义属性（也称为CSS变量）来为简单的HTML页面实现动态主题。 我们将创建暗色和亮色的示例主题，然后编写JavaScript在用户点击按钮时在这两者之间切换。
就像在典型的编程语言中一样，变量用于存储值。 在CSS中，它们通常用于存储颜色、字体名称、字体大小、长度单位等。它们可以在样式表中的多个位置重复使用。 大多数开发者都称呼为“CSS变量”，但官方名称是“自定义属性”。
CSS自定义属性可以修改在整个样式表中引用的变量。 以前，只有使用Sass等CSS预处理器才能实现这一点。
在创建动态主题示例之前，让我们先来了解一下自定义属性的基础知识。
自定义属性是一个名称以两个连字符（ - ）开头的属性，如--foo。 它们定义了可以使用var（）来引用的变量。 让我们看看下面的例子：
在 :root 选择器中定义自定义属性意味着它们可以在全局文档空间中应用于所有元素。 :root 是一个CSS伪类，它匹配文档的根元素 - <html>元素。 它类似于html选择器，但具有更高的特异性。
你可以在文档中的任何位置访问 :root 自定义属性的值：
你也可以预设一个备用值，例如
如果自定义属性没有定义的话，备用值将被使用。
在除了:root或html选择器之外的CSS选择器内定义定义属性可以使变量用于匹配元素及其子元素。
诸如Sass之类的CSS预处理器通常用于辅助前端Web开发。 预处理器的有用功能中就包括了变量。 但是Sass变量和CSS自定义属性之间有什么区别呢？
让我们开始给项目新建一个文件夹：
接着，在文件夹中新建一个index.html:
然后写入以下代码：
我们添加了一个使用<nav>标签的导航栏，一个页脚和一个用<div>包裹着的按钮（用于在明暗主题之间切换）还有一些虚拟的Lorem Ipsum文本。
现在让我们来写样式。在同一个文件的<head>里创建<style>标签并添加以下代码：
CSS3的HSL（色调，饱和度，亮度）表示法用于定义颜色。 色调是色环上的角度，示例所使用的350表示红色。 通过更改饱和度（颜色百分比）和亮度（百分比），所有页面的颜色都会出现不同的变化。
使用HSL能让我们只需更改色调值，即可轻松尝试主题的不同主色调。 我们还可以使用CSS变量作为色调值，并通过更改样式表中的单个值或使用JavaScript来切换颜色主题。
以下是这个页面的截图：
让我们使用CSS变量来保存页面中所有颜色的色调值。 在<style>标签的顶部添加一个:root选择器来添加一个全局CSS变量：
接下来，我们用-main-hue变量来替换掉所有hsl（）中写死的350值。 例如，这是导航选择器：
现在，如果你要指定除红色以外的任何颜色，则只需将相应的值赋给--main-hue即可。 这是一些例子：
我们定义了红、蓝、绿3种自定义属性，然后把--red-hue赋值给--main-hue。
以下是3种不同--main-hue值的页面截图：
CSS的自定义属性提供了这几个好处：
使用JavaScript从一组预定义值或用户提交的hue值（它应该在0到360之间）中来动态设置--main-hue的值，我们可以为用户提供许多彩色的主题。
例如以下的代码可以将--main-hue的值设置为240（蓝色）：
现在，让我们来为这个页面提供一个暗色的主题。 为了更好地控制不同实体的颜色，我们需要添加更多的变量。
通过页面的样式，我们可以在:root中定义相应颜色的自定义属性后，用变量替换不同选择器中的所有HSL颜色：
使用适当的自定义属性名称。 例如， - nav-bg-color是指导航背景的颜色，而--nav-text-color是指导航前景/文本的颜色。
现在复制粘贴:root选择器及其内容，然后添加一个暗色的主题属性：
如果将具有暗色值的主题属性添加到<html>元素，此主题就会被激活。
我们现在可以手动地通过降低HSL颜色的亮度值来提供暗色主题，或者我们也可以使用其他技巧，例如invert( )和brightness( )等这些常用的CSS滤镜来调整图像的渲染，也可以与其他任何元素一起使用。
将以下代码添加到:root [theme ='dark']：
invert( )滤镜会反转所选元素中的所有颜色（在例子中为每个元素）。 可以使用百分比或数字来指定反转值。 值为100％或1时将完全反转元素的色调、饱和度和亮度值。
brightness( )滤镜会使元素更亮或更暗。 值为0时会出现完全黑暗的元素。
invert( )滤镜会使一些元素非常明亮。 可以通过设置brightness(0.6)来调低亮度。
不同暗度的暗色主题截图：
现在，当用户点击Dark / Light按钮时，我们来使用JavaScript在暗色和亮色主题之间切换。 在index.html中，在<body>标签的底部添加<script>内联脚本，然后加入以下代码：
Document.documentElement指向文档的根DOM元素 - 即<html>。 此代码使用.hasAttribute( )方法检查主题属性是否存在，如果该属性不存在则添加暗色值，然后就会切换到黑暗主题。 否则，它会删除该属性，从而切换到亮色主题。
使用JavaScript来改变CSS自定义属性
通过使用JavaScript，我们可以访问自定义属性并动态更改其值。 在我们的示例中，我们将亮度值写死了，但它可以被动态更改。 首先，在HTML中dart/light按钮的旁边添加滑块：
滑块的初始值为1，允许用户调到最低0.3。
接下来，在:root[theme='dark']中添加一个暗度的自定义属性，初始值为1：
在brightness滤镜中用此自定义属性替换掉原先的固定值：
最后，添加以下JavaScript代码控制滑块的值来动态地改变--theme-darkness的值：
我们监听滑块的事件变化，并使用setProperty( )方法相应地设置--theme-darkness的值。
我们还可以将brightness滤镜应用于亮色主题。 在:root选择器添加--theme-darkness自定义属性：
然后在同一个选择器内添加brightness滤镜：
以下是暗色主题最终结果的截图：
还有亮色主题最终结果的截图：
在本教程中，我们已经了解了如何使用CSS自定义属性来创建主题并在它们之间动态切换。 我们使用了HSL配色方案，它允许我们指定具有色调、饱和度和亮度值的颜色以及CSS滤镜（invert和brightness）以创建亮色主题的暗色版本。
即将到来的Windows 10创作者更新当中，微软再次为Edge浏览器添加了许多新特性，其中就包括对CSS自定义属性的支持。
微软最新确认，EdgeHTML 15.15061中已经增加了对CSS自定义属性的支持，并将在创作者更新当中正式推出。
微软表示，以往开发者都是使用SASS或者LESS这样的编辑器来处理Edge浏览器中的CSS，但这些工具有一个共同的缺点，开发人员想要更改一些变量的时候就必须要重新编译样式表。
而当Edge浏览器支持CSS自定义属性之后，虽然表面上看起来并没有太多改变，但其实却是一个新的原始值类型，允许跨CSS属性完全级联变量，直接通过JavaScript进行交互。
同时微软还希望CSS自定义属性能够在Blink、Gecko和Webkit内核浏览器之间实现互操作，并藉此提高Web开发效率。
微信公众号搜索"驱动之家"加关注，每日最新的手机、电脑、汽车、智能硬件信息可以让你一手全掌握。推荐关注！
*请认真填写需求信息，我们会在24小时内与您取得联系。
