用於使用JavaScript更改CSS圖像過濾器的HTML Range元素

Question

當用戶在范圍元素上選擇新值時，我正在嘗試使用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>

但是當我在range元素上選擇一個新值時，圖像的樣式屬性就不會響應。 請幫助！ 非常感謝：）

Answer 1

你可以在這里找到一個工作小提琴。

您的代碼中存在一些問題：

1）首先，您應該使用onchange事件而不是onclick事件。 或者您也可以使用oninput事件。

2）將過濾器的新值分配給Image對象的正確方法是Image.style.WebkitFilter="grayscale(10%)"; 。

JavaScript的：

function ChangeFilter() {
    Image = document.getElementById("Image");
    Filter = document.getElementById("Filter").value;

    Image.style.WebkitFilter = "grayscale(" + Filter * 10 + "%)"
}

CSS

img {-webkit-filter: grayscale(100%); filter: grayscale(100%);}

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>

Answer 2

在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>

Answer 3

您需要將灰度值包裝為字符串。

我使用times而不是ifs簡化了代碼。

此外，您需要設置-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>

用於使用JavaScript更改CSS圖像過濾器的HTML Range元素

問題描述

3 個解決方案

解決方案1
1 2016-02-11 13:46:17

解決方案2
1 已采納 2016-02-11 13:56:09

解決方案3
0 2016-02-11 13:54:06

用於使用JavaScript更改CSS圖像過濾器的HTML Range元素

問題描述

3 個解決方案

解決方案1 1 2016-02-11 13:46:17

解決方案2 1 已采納 2016-02-11 13:56:09

解決方案3 0 2016-02-11 13:54:06

解決方案1
1 2016-02-11 13:46:17

解決方案2
1 已采納 2016-02-11 13:56:09

解決方案3
0 2016-02-11 13:54:06