我正在努力改变
-webkit-filter: grayscale(30%);
使用 HTML5 范围输入和 javascript 动态计算值。
我如何使用 javascript 访问 css webkit 过滤器属性?
我正在努力改变
-webkit-filter: grayscale(30%);
使用 HTML5 范围输入和 javascript 动态计算值。
我如何使用 javascript 访问 css webkit 过滤器属性?
Javascript:
function changegrayscale(value) {
document.getElementById("divID").setAttribute("style","-webkit-filter:grayscale(" + value + "%)")
}
HTML:
<div id="divID" onclick="changegrayscale('30')">Clcik Me</div>
CSS:
#divID {
-webkit-filter: grayscale(70%);
background: red;
width: 100px;
height: 100px;
}
试试这个 -演示
<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>
使用 jQuery,您可以在 '.elements' 上这样做:
function changegrayscale(value) {
$('.elements').css({
'-webkit-filter': 'grayscale('+value+'%)'
});
}