如何在JavaScript中使用CSS变量来更改图像？

我工作的一个小更新http://codepen.io/wesbos/pen/adQjoY，并想用CSS变量来改变形象，只是为了看看，如果我能做到这一点。到目前为止，这不起作用。如何在JavaScript中使用CSS变量来更改图像？

<img src=imageFile> 

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

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

和我有一些如果，那么，否则，在<script> ... </script>实施改变imageFile变量。

在DevTools控制台我得到：

GET文件：///用户/添/集团/ JavaScript30主/ 03％20-％20CSS％20Variables /镜像文件网:: 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>

来源

2016-12-27 Tim Biden

因此，原始图像在线托管，但您尝试加载的替换图像来自您自己的本地目录？这似乎是问题。 –

''标记没有'src' CSS属性。但是，您可以尝试使用'background-image'。 – 2016-12-27 19:08:07

@torazaburo：您可以直接设置src HTML属性。看到我的答案。 – BoltClock

如果你想使用CSS来指定文件的源，你可以使用这样的事情：

HTML：

<img>

CSS：

img{ 
    content:url("IMAGE URL"); 
}

，供大家参考：https://jsfiddle.net/tqoLe7r3/

来源

2016-12-27 19:09:00 sachsure

OP想知道如何使用CSS变量进行这项工作。请参阅https://jsfiddle.net/tqoLe7r3/1/。 – 2016-12-27 19:25:18

在你:root声明，只能设置CSS值的变量。

试试这个：

:root{ 
    --imageFile: url('https://source.unsplash.com/7bwQXzbF6KE/800x500'); 
} 
img { 
    content: var(--imageFile); 
}

像这样：https://jsfiddle.net/wdkmbeL7/

来源

2016-12-27 19:33:30 Okomikeruko

“你只能将CSS值设置为变量”这根本不是真的。请参阅https://www.w3.org/TR/css-variables-1/#syntax另外，内容属性在:: before和:: after之外的任何内容上都不受支持。只有一些浏览器支持它，超出规格。直到css-content-3进入主流（我不指望在未来几年内发生）之前，我不会依赖它。 – BoltClock

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

src=imageFile点到当前URL目录路径的资源称为imageFile。这就是为什么浏览器试图GET file:///Users/tim/bloc/JavaScript30-master/03%20-%20CSS%20Variables/imageFile，这自然是行不通的。

您仍然可以使用自定义属性，但是当你需要设置一个HTML属性，而不是CSS属性，不需要img规则。取而代之，给img一个ID，从您的自定义属性值中删除双引号的嵌套（因为它们不是必需的），并将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元素，因为它是不可能在没有一个有效的HTML文档中的非空src的img元素标记技术上未使用的，但是这将是有益的如问题中所述，稍后再交换图像。
如果有人想知道这种事情是否使用JavaScript是一种破解，那不是 - spec本身明确列出了JavaScript作为CSS自定义属性的有效（甚至是典型）用例。

来源

2016-12-28 02:38:19 BoltClock

如何在JavaScript中使用CSS变量来更改图像？

回答

相关问题