HTML範囲の要素がCSSフィルタ

に変更されましたここに画像と範囲の要素があります。ファイルイメージが選択されると、そのイメージが表示されます。次に、範囲値で輝度を変更します。しかし、それは価値の変化に対応していません。 jQueryのは、すでにが私を助けてください含まれている私は、CSSフィルタ特性をログに記録しようとすると、それは常にnoneHTML範囲の要素がCSSフィルタ

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

を返します。たくさん

出典

2016-09-24 necroface

私は解決策を自分で見つけることができました。必要なのは

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

出典

2016-09-24 10:01:13 necroface

はまた、以下のスニペットは素晴らしい働いている私の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>

出典

2016-09-24 06:16:55 Illdapt

CodepenでもSnippetでも動作しません。 'brightness'変数を記録するだけです。' filter'属性は 'none'です。 – necroface

Duh、あなたのブラウザとの互換性です。もし私がそれが私のために働くとすれば、おそらく動作し、さらにデバッグして互換性を実現する必要があります。 – Illdapt

実際、私はそれを解決しました。とにかくとにかくありがとう：D – necroface

HTML範囲の要素がCSSフィルタ

答えて

関連する問題