用于使用JavaScript更改CSS图像过滤器的HTML Range元素
[英]HTML Range element to change CSS image filter with JavaScript
问题描述
I am trying to use JavaScript to change an image's CSS filter when a user selects a new value on a range element. 
当用户在范围元素上选择新值时，我正在尝试使用JavaScript来更改图像的CSS过滤器。 My HTML does not seem to work though. 我的HTML似乎不起作用。 Here are my CSS image styles: 这是我的CSS图像样式：
<!DOCTYPE html>
<html>
<head> <style>
img {-webkit-filter: grayscale(100%); filter: grayscale(100%);}
</style> </head>
Here are my image and range elements : 这是我的图像和范围元素：
<body>
<img src="pineapple.jpg" id="Image" alt="Pineapple" width="300"
height="300">
<form>
Photo Filter:
<input type="range" id="Filter" name="points" min="0" max="10"
onclick="ChangeFilter()">
</form>
Here is my JavaScript function to change the CSS image style: 这是我改变CSS图像样式的JavaScript函数：
<script>
function ChangeFilter() {
Image = document.getElementById("Image").style.filter;
Filter = document.getElementById("Filter").value;
if (Filter == 1) {Image = grayscale(10%);}
if (Filter == 2) {Image = grayscale(20%);}
if (Filter == 3) {Image = grayscale(30%);}
if (Filter == 4) {Image = grayscale(40%);}
if (Filter == 5) {Image = grayscale(50%);}
if (Filter == 6) {Image = grayscale(60%);}
if (Filter == 7) {Image = grayscale(70%);}
if (Filter == 8) {Image = grayscale(80%);}
if (Filter == 9) {Image = grayscale(90%);}
if (Filter == 10) {Image = grayscale(100%);}
}
</script>
</body>
</html>
But when I select a new value on the range element, the image's style properties just won't respond. 但是当我在range元素上选择一个新值时，图像的样式属性就不会响应。 Help Please! 请帮助！ Many Thanks :) 非常感谢 ：）
3 个解决方案
解决方案1
1 2016-02-11 13:46:17
You can find a working fiddle here . 你可以在这里找到一个工作小提琴 。
There were a few problems in your code: 您的代码中存在一些问题：
1) First of all, you should use the onchange event instead of the onclick event. 1）首先，您应该使用onchange事件而不是onclick事件。 Or you can use oninput event as well. 或者您也可以使用oninput事件。
2) The correct way of assigning new value of the filter to an Image object is Image.style.WebkitFilter="grayscale(10%)"; 2）将过滤器的新值分配给Image对象的正确方法是Image.style.WebkitFilter="grayscale(10%)"; . 。
JavaScript: JavaScript的：
function ChangeFilter() {
Image = document.getElementById("Image");
Filter = document.getElementById("Filter").value;
Image.style.WebkitFilter = "grayscale(" + Filter * 10 + "%)"
}
CSS CSS
img {-webkit-filter: grayscale(100%); filter: grayscale(100%);}
HTML HTML
<img src="https://upload.wikimedia.org/wikipedia/commons/f/fd/Pink_flower.jpg" id="Image" alt="Pineapple" width="300" height="300">
<form>
Photo Filter:
<input type="range" id="Filter" name="points" min="0" max="10" onchange="ChangeFilter()" />
</form>
解决方案2
1 已采纳 2016-02-11 13:56:09
Change onclick event to onchange in html and in javascript do this: 在html和javascript中将onclick事件更改为onchange ，执行以下操作：
<script>
var image = document.getElementById("Image");
var range = document.getElementById("Filter");
function ChangeFilter() {
image.style.WebkitFilter = "grayscale(" + range.value*10 + "%)");
image.style.filter = "grayscale(" + range.value*10 + "%)");
}
</script>
解决方案3
0 2016-02-11 13:54:06
You need to wrap the grayscale value as a string. 您需要将灰度值包装为字符串。
I have simplified the code for you by using times, instead of ifs. 我使用times而不是ifs简化了代码。
Also, you needed to set -webkit-filter and if you are starting at 100%, set the value to 10 to start with. 此外，您需要设置-webkit-filter ，如果您从100％开始，请将value设置为10以开始。
img { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
<img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon@2.png" id="Image" alt="Pineapple" width="300" height="300"> <form> Photo Filter: <input type="range" id="Filter" name="points" min="0" max="10" onchange="ChangeFilter()" value="10"> </form> <script> function ChangeFilter() { var filter = document.getElementById("Filter").value; var greyScale = 'grayscale(' + (filter * 10) + '%)'; document.getElementById("Image").style['-webkit-filter'] = greyScale; document.getElementById("Image").style.filter = greyScale; } </script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.