当用户在范围元素上选择新值时，我正在尝试使用 JavaScript 更改图像的 CSS 过滤器。我的 HTML 似乎不起作用。 这是我的 CSS 图像样式:
<!DOCTYPE html>
<html>
<head> <style>
img {-webkit-filter: grayscale(100%); filter: grayscale(100%);}
</style> </head>
这是我的图像和范围元素:
<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>
这是我用来更改 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>
但是当我在范围元素上选择一个新值时，图像的样式属性不会响应。请帮助!非常感谢 :)
最佳答案
在 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>
关于javascript - 使用 JavaScript 更改 CSS 图像过滤器的 HTML Range 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35340903/