这是我的图像和范围元素。当选择文件图像时，它将被显示，然后我想通过范围值更改其亮度。但它不响应值的变化。我尝试记录 CSS 过滤器属性，它总是返回 none
<body>
<input type="range" id="myRange" value="100" max="200" min="0">
<input type="file" id="myImg">
<br>
<img src="#" id="image">
<div id="demo">1</div>
<script type="text/javascript">
$("#myRange").change(function(){
var brightness=$(this).val();
$("#demo").html(brightness+"%");
console.log(brightness);
$("#image").css("filter","brightness("+brightness+"%)");
console.log($("#image").css("filter"));
});
$("#myImg").change(function(){
if (this.files && this.files[0]){
var reader=new FileReader();
reader.onload=function(e){
$("#image").attr("src",e.target.result);
}
reader.readAsDataURL(this.files[0]);
}
});
</script>
</body>
jQuery 已包含在内 请帮帮我。非常感谢
最佳答案
似乎在我的 PEN HERE 中工作正常
下面的代码片段也运行良好。我首先尝试重新定位您的<script>到头部，如果没有，你可以尝试包含一个外部JS文件。
$("#myRange").change(function() {
var brightness = $(this).val();
$("#demo").html(brightness + "%");
console.log(brightness);
$("#image").css("filter", "brightness(" + brightness + "%)");
console.log($("#image").css("filter"));
});
$("#myImg").change(function() {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$("#image").attr("src", e.target.result);
}
reader.readAsDataURL(this.files[0]);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input type="range" id="myRange" value="100" max="200" min="0">
<input type="file" id="myImg">
<br>
<img src="#" id="image">
<div id="demo">1</div>
</body>关于javascript - HTML Range 元素更改 CSS 过滤器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39672717/