javascript 动态更改 Webkit 过滤器值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12297350/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically changing Webkit filter values
提问by Manoj kumar
I was struggling to change the value of
我正在努力改变的价值
-webkit-filter: grayscale(30%);
value dynamically using HTML5 range input and javascript.
值动态使用 HTML5 范围输入和 javascript。
How could i access the css webkit filter attribute using javascript ?
我如何使用 javascript 访问 css webkit 过滤器属性？
采纳答案by Ahsan Khurshid
Javascript:
Javascript：
function changegrayscale(value) {
document.getElementById("divID").setAttribute("style","-webkit-filter:grayscale(" + value + "%)")
}?
HTML:
HTML：
<div id="divID" onclick="changegrayscale('30')">Clcik Me</div>??
CSS:
CSS：
#divID {
-webkit-filter: grayscale(70%);
background: red;
width: 100px;
height: 100px;
}
回答by Zoltan Toth
Try this - DEMO
试试这个 -演示
<input type="range" min="0" max="100" step="10" id="inp" />
<img src="http://lorempixel.com/300/200" id="img" />
<img src="http://lorempixel.com/300/200" />?
<script>
document.getElementById("inp").addEventListener("change", function() {
document.getElementById("img").setAttribute("style", "-webkit-filter:grayscale(" + this.value + "%)");
}, false);?
</script>
回答by Felix Gertz
With jQuery you could do it like this on the '.elements':
使用 jQuery，你可以在 '.elements' 上这样做：
function changegrayscale(value) {
$('.elements').css({
'-webkit-filter': 'grayscale('+value+'%)'
});
}
