web-dev-qa-db-ja.com

異なるブラウザーでのHTML要素の不透明度の設定

HTMLを設定する必要があります<img src=""/>すべてのブラウザのJavaScriptにおけるオブジェクトの不透明度。

Firefoxでは、次の行を使用します。

imageobject.style.MozOpacity=opacity/100;

異なるブラウザで要素の不透明度を設定するための適切なJavaScriptコードは何ですか？

javascriptopacity
14
merveotesi
img.style.opacity = .5; //For real browsers;
img.style.filter = "alpha(opacity=50)"; //For IE;

ユーザーエージェントをスニッフィングする必要はありません。ブラウザは無関係な値を無視するため、両方の値を設定するだけです。

35
Dennis

JavaScriptで要素の不透明度を設定します。

これを行うには多くの方法があります。

例1、次のように不透明度50％を与える要素のスタイル属性を設定します。

<html>
  <div style='opacity:.5'>this text has 50% opacity.
  </div>
</html>

例2、document.getElementbyIdで要素を取得する場合、style.opacityプロパティに0〜1の数値を割り当てることができます。テキストは20％の不透明度に設定されています。

<html>
 <div id="moo">the text</div>
 <script type="text/javascript">
  document.getElementById("moo").style.opacity=0.2;  
 </script>
</html>

例、divのクラスを参照するCSSセレクターをHTMLに埋め込みます。 div内のテキストは黒ですが、不透明度が50％なので灰色がかっています。

<html>
  <style>
    .foobar{
      opacity: .5; 
    }
  </style>
  <div class="foobar">This text is black but appears grey on screen</div>
</html>

例4、jQueryをインポートします。裸のdiv要素を作成します。 jQueryを使用してdivを取得し、そのhtmlコンテンツを独自の不透明度を設定するスパン要素に設定します。

<html>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
 </script>
 <div></div>
 <script type="text/javascript">
  $("div").html("<span style='opacity:.7'>text is 70% opacity</span>");
 </script>
</html>

例5、

JQueryをインポートします。 divにクラスを割り当てます。要素をクラスで選択し、.cssプロパティを設定して、最初のパラメーターを不透明度として、2番目のパラメーターを0〜1の数値として渡します。

<html>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
 </script>
 <div class="foobar">the text</div>
 <script type="text/javascript">
  $(".foobar").css( "opacity", .5);
 </script>
</html>

例6、rgbaの色を持つように要素のスタイルを設定します

<div style="color: rgba(0, 0, 0, .5)">
  This text color is black, but opacity of 0.5 makes it look grey.
</div>

例7、jQueryを使用して、ブラウザーが要素を10％の不透明度にフェードアウトするのに4秒かかるようにします。

<html>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
 </script>
 <div class="foobar">the text</div>
 <script type="text/javascript">
  $(".foobar" ).fadeTo( 4000 , 0.1, function() {
    alert("fade to 10% opacity complete");
  });
 </script>
</html>

例8、animateメソッドを使用して、不透明度を5％に変更するのに5秒かかるようjqueryに指示します。

<html>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
 </script>
 <div id="flapjack">the text</div>
 <script type="text/javascript">
  $('#flapjack').animate({ opacity: 0.05 }, 5000);
 </script>
</html>
6
Eric Leschinski

ベンダー固有のプレフィックスやブラウザ検出を使用する必要はありません...

opacityを設定するだけです。 Firefox、ChromeおよびSafariは、シンプルなopacityをしばらくの間サポートしており、IE9以降はopacityをサポートしています。filterはIEで動作します。

1
Ry-

chrome = imgobject.style.opacity=0.5;_をIE imgobject.style.filter='alpha(opacity=50)'に設定しただけです。

1
Krzysztof