Question

我有一个问题，即如何访问同一页面上不内联/存在的CSS变量。即CSS变量在自定义CSS文件中定义。

我的页面有3个输入的图像。一个用于控制背景颜色，模糊和填充。当拾取滑块/颜色时，相应地调整图像和背景颜色。我已经编写了javascript并且它有效，但我不确定其确切原因。我正在阅读有关mozilla开发人员文档的文档，但我的问题没有得到解答：https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

我的问题如下：

我的CSS变量是使用我的自定义CSS文件中的$(CFBundleDisplayName)伪类在根级别定义的
我正在使用javascript

:root

我理解默认情况下document.documentElement.style.setProperty会返回HTML元素，您可以使用此元素查找所有子元素。并使用documentElement函数修改CSS变量。那么我怎么能通过选择全局HTML元素来简单地改变我定义的CSS变量呢？

是否因为.style.setProperty伪类使这些变量可以在HTML元素级别进行修改？我试图围绕如何在更具体的层面上访问和修改这些CSS变量。如果答案就像在根伪级别定义的css变量一样简单，可以通过访问HTML元素来修改，这将证实我的怀疑。否则，如果你可以深入了解更多细节，那将会有所帮助。 / p>

链接到Plunker：http://plnkr.co/edit/FdlCW7Ym5m8odaK05u4g?p=preview

HTML：

:root

CSS：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Scoped CSS Variables and JS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h2>Update CSS Variables with <span class='hl'>JS</span></h2>

  <div class="controls">
    <label for="spacing">Spacing:</label>
    <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

    <label for="blur">Blur:</label>
    <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">

    <label for="base">Base Color</label>
    <input id="base" type="color" name="base" value="#ffc600">
  </div>

  <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">

  <script>

    const inputs = document.querySelectorAll('.controls input');

    function handleUpdate() {

      const val = this.dataset.sizing || '';
      document.documentElement.style.setProperty(`--${this.name}`,this.value + val);
    }

    inputs.forEach(currentItem => {
      currentItem.addEventListener('change', handleUpdate);
      currentItem.addEventListener('mousemove', handleUpdate)
    });
  </script>

Answer 1

您的假设是正确的：使用:root - 选择器指定的CSS自定义属性被分配给html - 元素。由于继承，它们可供<html>的所有孩子使用。

来自https://developer.mozilla.org/en-US/docs/Web/CSS/:root

：root CSS伪类匹配表示文档的树的根元素。在HTML中，：root表示<html>元素，与选择器html相同，只是它的特异性更高。

来自https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement

Document.documentElement返回作为文档根元素的Element（例如，HTML文档的<html>元素）。

CSS变量根据伪类范围和通过javascript更改值

1 个答案: