javascript - 如何将 CSS 变量与 JavaScript 一起使用来更改图像？

Question

我正在对 http://codepen.io/wesbos/pen/adQjoY 进行小更新并想使用 CSS 变量来更改图像，只是想看看我是否可以做到。到目前为止，它不起作用。

<img src=imageFile>

<style>
:root {
    --image: 1;
    --imageFile: '"https://source.unsplash.com/7bwQXzbF6KE/800x500"';
}

img {
    src: var(--imageFile);
}
</style>

我有一些 If、Then、Else，在 <script> ... </script> 中实现更改 imageFile变量。

在 DevTools 控制台中，我得到:

GET file:///Users/tim/bloc/JavaScript30-master/03%20-%20CSS%20Variables/imageFile net::ERR_FILE_NOT_FOUND

图像没有改变。你能帮我吗？这是我更新前的完整代码:

// get the inputs
const inputs = [].slice.call(document.querySelectorAll('.controls input'));

// listen for changes
inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

function handleUpdate(e) {
// append 'px' to the end of spacing and blur variables
    const suffix = (this.id === 'base' ? '' : 'px');
    document.documentElement.style.setProperty(`--${this.id}`, this.value + suffix);
}

:root {
  --base: #ffc600;
  --spacing: 10px;
  --blur: 10px;
}

body {
  text-align: center;
}

img {
  padding: var(--spacing);
  background: var(--base);
  -webkit-filter: blur(var(--blur));
  /* 👴 */
  filter: blur(var(--blur));
}

.hl {
  color: var(--base);
}

body {
  background: #193549;
  color: white;
  font-family: 'helvetica neue', sans-serif;
  font-weight: 100;
  font-size: 50px;
}

.controls {
  margin-bottom: 50px;
}

a {
  color: var(--base);
  text-decoration: none;
}

input {
  width:100px;
}

<h2>Update CSS Variables with <span class='hl'>JS</span></h2>
<div class="controls">
  <label>Spacing:</label>
  <input type="range" id="spacing" min="10" max="200" value="10">

  <label>Blur:</label>
  <input type="range" id="blur" min="0" max="25" value="10">

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

<img src="http://unsplash.it/800/500?image=899">

<p class="love">Made by <a href="http://twitter.com/wesbos">@wesbos</a> 😘</p>
<p class="love">Chrome 49+, Firefox 31+</p>

Answer 1

src是 HTML 属性，而不是 CSS 属性。

src=imageFile指向当前 URL 目录路径中名为 imageFile 的资源.这就是浏览器尝试 GET file:///Users/tim/bloc/JavaScript30-master/03%20-%20CSS%20Variables/imageFile 的原因，这自然是行不通的。

您仍然可以使用自定义属性，但由于您需要设置 HTML 属性，而不是 CSS 属性，img不需要规则。给出 img取而代之的是一个 ID，从您的自定义属性值中删除双引号嵌套，因为它们不需要(甚至在 JavaScript 中也不需要)，并设置 src 的值HTML 属性直接自定义属性值:

var customProps = window.getComputedStyle(document.documentElement);
var img = document.createElement('img');
img.id = 'imageFile';
img.alt = '';
img.src = customProps.getPropertyValue('--imageFile');
document.body.appendChild(img);

:root {
    --image: 1;
    --imageFile: https://source.unsplash.com/7bwQXzbF6KE/800x500;
}

<!--
The script should generate an img element that looks like this:
<img id="imageFile" alt="" src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
-->

一些注意事项:

• 我要离开 --image尽管在此示例中未使用自定义属性。我认为它应该作为查询字符串数据附加到 URL — 这将作为练习留给读者。

• ID 在技术上也未在此示例中使用，因为我通过 JavaScript 添加元素，因为不可能标记 img没有非空元素 src在有效的 HTML 文档中，但在稍后按照问题中的描述换出图像时会很有用。

• 如果有人想知道将 JavaScript 用于此类事情是否是一种 hack，那不是 — spec本身明确地将 JavaScript 列为 CSS 自定义属性的有效(甚至典型)用例。