4

我正在努力改变

-webkit-filter: grayscale(30%);

使用 HTML5 范围输入和 javascript 动态计算值。

我如何使用 javascript 访问 css webkit 过滤器属性?

4

3 回答 3

4

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;
}

演示

于 2012-09-06T10:04:53.500 回答
1

试试这个 -演示

<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>
于 2012-09-06T10:08:02.390 回答
-1

使用 jQuery,您可以在 '.elements' 上这样做:

function changegrayscale(value) {
  $('.elements').css({
    '-webkit-filter': 'grayscale('+value+'%)'
  });
}
于 2012-09-06T09:51:40.770 回答