如何使用按鈕應用CSS修改

-3

我想對圖像應用過濾器（當我單擊按鈕時）並且如果我單擊另一個按鈕，它會應用另一個過濾器。如何使用按鈕應用CSS修改

我該怎麼做？

感謝您的幫助。

我試過在CSS中使用：主動功能，但只適用於按鈕。我試過使用JavaScript，但沒有奏效。

function FilterGrey() { 
    var FilterGrey = Document.getElementsById("FilterGrey"); 
    document.body.video.filter = "grayscale(100%)" 
}

來源

2016-09-19 Moloco

哪裏是你的html代碼？ –

您是否嘗試過調試您的代碼？ 'document.body.video.filter =「灰度（100％）」什麼是document.body.video？即使它確實存在，你也會尋找'Node.style.filter'而不是'Node.filter'。另外，這聽起來像你想要多個過濾器可切換，你將需要多一點的邏輯。你可以請[編輯]你的問題，包括一個[mcve]？調試問題需要MCVE成爲話題。 –

下面是使用JavaScript切換類的示例。

http://codepen.io/anon/pen/mAAPrz

function filter1() { 
 
    document.getElementById('image').classList.toggle('filter1'); 
 
} 
 
function filter2() { 
 
    document.getElementById('image').classList.toggle('filter2'); 
 
}

filter1 { 
 
    filter: blur(10px); 
 
} 
 
.filter2 { 
 
    filter: grayscale(50%); 
 
}

<img src="http://mikeruiz.org/files/bliss-caf-newest.jpg" id="image"> 
 
<button onclick="filter1();">Filter 1</button> 
 
<button onclick="filter2();">Filter 2</button>

來源

2016-09-19 00:42:21 Ryan

謝謝你的工作：D但知道如何應用多個過濾器？ – Moloco

您可以使用相同的'filter'屬性按順序應用多個過濾器。只要將一個鏈接到另一個的末尾。它看起來像這樣：'filter：blur（10px）灰度（50％）;' –

你可以試試這個

var FilterGrey = document.getElementById("FilterGrey"); 
 
var FilterOpacity = document.getElementById("FilterOpacity"); 
 
var FilterVideo = document.getElementById("FilteredImg"); 
 
FilterGrey.addEventListener('click', function(){ 
 
\t \t FilterVideo.style.filter = "grayscale(100%)"; 
 
}); 
 
FilterOpacity.addEventListener('click', function(){ 
 
\t \t FilterVideo.style.filter = "opacity(40%)"; 
 
})

#FilteredImg { 
 
    display:block; 
 
    margin-bottom:20px 
 
}

<img id="FilteredImg" src="http://placehold.it/350x150/e8117f/fff"> 
 
<button id="FilterGrey"> 
 
Filter Grey 
 
</button> 
 
<button id="FilterOpacity"> 
 
Filter Opacity 
 
</button>

來源

2016-09-19 00:54:57

如何使用按鈕應用CSS修改

回答

相關問題