我正在对 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>
最佳答案
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 自定义属性的有效(甚至典型)用例。
关于javascript - 如何将 CSS 变量与 JavaScript 一起使用来更改图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41350728/