HTML范围元素改变CSS过滤器

HTML Range element changes CSS filter

本文关键字：CSS 过滤器 改变 元素 范围 HTML      更新时间：2023-09-26

这里是我的图像和范围元素。当一个文件图像被选中时，它将被显示，然后我想通过范围值来改变它的亮度。但它不会对价值变化做出反应。我尝试记录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已经包含在内请帮帮我。谢谢大家

似乎在我的笔这里工作得很好

下面的代码段也工作得很好。我会首先尝试重新定位你的<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>

我自己设法找到了解决办法。我需要的是

$("#image").css({
   "filter":"brightness("+brightness+"%)",
   "webkitFilter":"brightness("+brightness+"%)",
   "mozFilter":"brightness("+brightness+"%)",
   "oFilter":"brightness("+brightness+"%)",
   "msFilter":"brightness("+brightness+"%)"
});
相关文章：