web前端需要了解自定义的CSS属性

在这篇文章中，我们介绍自定义的CSS属性，显示为什么要使用它们，如何定义它们以及如何使用和不使用JavaScript来更改它们。

今天的前端开发人员有大量的工具来帮助他们创建和编辑CSS。其中一种工具是预处理器，使用预处理器的主要优点之一是可以在样式中使用变量。这消除了复制和粘贴的需要，这使得重构变得更容易。

当使用预处理器变量时，开发人员倾向于用颜色，字体大小，布局细节等来定义它们。这一切都很好，但预处理器变量有一些限制：

• 不能被JavaScript操纵。预处理器变量在它们到达浏览器之前被提前编译，如CSS属性/值对。

• 没有意识到DOM或CSSOM。就像上面那样，变量是提前编译的，没有机会去了解这些细节。

• 不能被继承。在选择器上定义预处理变量并不意味着该选择器的后代也可以使用该变量。

老式的CSS变量

在继续讨论这个话题之前，最好知道CSS有一个准变量，那就是currentColor关键字。这个支持的变量引用了一个元素的当前颜色值。

.block {
color: cornflowerblue;
border: 1px solid currentColor; /*Border color will be the same as font color*/
}

虽然currentColor功能强大，但也有其局限性，包括只接受颜色值。

定义自定义CSS属性

CSS规范的伟大创造者，也就是W3，并没有固有地创建CSS变量。所创建的是自定义属性，它们的定义是：

自定义作者定义属性的集合，统称为自定义属性，它允许作者使用作者选择的名称将属性赋值给属性，以及var()允许作者在其他属性中使用这些值的函数文件中其他地方的属性。

自定义属性就像任何其他的CSS属性，可以在任何元素上定义。他们使用相同的继承和级联，我们都珍视我们的心。他们可以是有条件的，在媒体查询中设置的，以及其他规则。此外，他们可以设置内联和style标签。

CSS自定义属性有两个主要部分：定义它们并阅读它们。

声明一个自定义属性

声明一个自定义的属性，通过启动它的名字–然后赋值给它。

:root {
--bodyColor: cornflowerblue;
}

属性名称区分大小写。所以，–bodyColor和–BodyColor是两个不同的自定义属性。

读取自定义属性

要读取CSS自定义属性，所有必须做的就是使用var函数：

:root {
--linkColor: orange;
}
a {
color: var(--linkColor);
}

上面，我们linkColor在:root伪类上定义了一个自定义属性，然后使用var函数来获取属性的值来设置链接的颜色值。由于我们linkColor在:root伪类上定义了我们可以访问linkColor链接选择器中的变量。但是，看看这个例子：

a {
--linkColor: orange
}
button {
color: var(--linkColor)
}

在上面的例子中，我们linkColor在链接选择器中定义，但是我们试图在按钮选择器中引用它。由于我们linkColor在链接选择器中定义，所以linkColor不会被定义。所以我们最终会得到一个颜色值inherited。

事情要指出的是，与自定义属性，计算值，如果没有找到，要么是initial还是inherited取决于现有的具体属性。

为了解决这种情况，我们的自定义属性可能没有定义，或者在使用时可能没有值，var函数有一个回退参数。

h1 {
color: var(--headingColor, red);
}

在上述情况下，如果headingColor从未定义或给定值，h1则将回退到红色。

不使用JavaScript更改自定义CSS属性

让我们以一个非常简单的例子来说明在hover上更改自定义属性：

button {
color: red;
width: 3em;
--buttonBackground: red;
background-color: var(--buttonBackground);
transition: background-color .2s ease;
}
button:hover {
--buttonBackground: blue;
}

正如你所看到的，悬停按钮重新定义了buttonBackground蓝色的值。

是的，我知道这是一个相当简单的例子，可以没有自定义属性。但是，如果我们一次又一次地改变其他一些属性和价值会发生什么？这种能力使我们能够创造更多可读的代码。我们来看一个更高级的例子。

:root {
--borderRadius: 10px;
}
@media screen and (min-width: 768px) {
--borderRadius: 15px;
}
button {
border-radius: var(--borderRadius);
}

现在，让我们考虑以上。正如你所看到的，我们borderRadius在根中设置了10个像素。然后我们在我们按钮的border-radius 值的值中使用这个自定义属性 。但最酷的是，我们也重新定义了我们的媒体查询中的自定义属性稍大一些。所以如果我们点击768或更大的断点，那么我们的按钮将有一个稍大的边界半径。

使用JavaScript更改自定义CSS属性

现在，自定义属性开始闪耀的是他们与JavaScript一起使用的能力。

在JavaScript中使用CSS自定义属性时，我们需要做的两个主要部分是读取属性并在属性上设置一个新值。

获取自定义属性的价值

要获取内联自定义属性值的值，只需使用以下内容：

element.style.getPropertyValue('--foo');

要从样式表中获取自定义属性值或继承它：

getComputedStyle(element).getPropertyValue('--foo');

我将使用上面的方式来获取值，因为它也适用于内联值，不像第一个被覆盖的值。

设置自定义属性的值

设置自定义属性的值非常简单：

element.style.setProperty('--foo', 1 + 3);

以上将设置foo内联元素的值为4。很简单，对吧？

用一个演示来包装它

我们来看看一个将这一切结合在一起的小例子。

在上面的笔中，您可以在结果视图中看到，如果您将鼠标移动到白色圆点上，将会跟随您的光标。一个简单的演示，显示了我们刚刚在这篇文章中提到的一些事情。我们来分解一下。

我们来看看JavaScript部分：

var rootEl = document.documentElement;
document.addEventListener('mousemove', e => {
let x = e.clientX / innerWidth;
let y = e.clientY / innerHeight;
rootEl.style.setProperty('--mouse-x', x);
rootEl.style.setProperty('--mouse-y', y);
});

我们在这里做的是绑定一个简单的鼠标移动事件到文档。当鼠标移动时，我们将鼠标放在垂直或水平位置，并将该值除以视口的宽度或高度，得到一个从0到1的数字。这将允许我们使用这个数字作为百分比。做完这些计算之后，我们为鼠标x和y设置CSS自定义属性值，如下所示：

做完这些之后，我们现在可以访问我们的CSS中的鼠标位置。这是多么酷？让我们来看看我们在CSS中是如何做到的：

.demo:before {
--ballWidth: 3em;
content: '';
display: block;
position: absolute;
top: calc((100% * var(--mouse-y)) - (var(--ballWidth) * .5));
left: calc((100% * var(--mouse-x)) - (var(--ballWidth) * .5));
height: var(--ballWidth);
width: var(--ballWidth);
background-color: white;
border-radius: var(--ballWidth);
}

正如你在上面的CSS代码片段中看到的，我们引用了我们在JavaScript中设置的鼠标位置属性。我们在这两行中简单地称呼他们：

我们将相应的鼠标位置作为我们想要移动元素的方向，然后乘以100％将我们的数字转换为百分比。所以，随着我们的鼠标移动，我们正在更新鼠标变量，我们的CSS正在为我们移动元素的工作。

最后的想法

CSS自定义属性是一个非常强大的方式，让你调整你的样式表。它们是分离JavaScript行为和样式的一种方式，正如在JavaScript中设置CSS中的信息以用于其样式所示。

即使您为CSS使用预处理器，CSS自定义属性仍然可以直接嵌入到CSS中。原因是自定义属性可以与DOM或CSSOM交互，并且可以与预处理器变量不同地动态更改。

你怎么看？

本文固定链接: http://www.i7758.com/archives/2885.html