Réglage de l'opacité des éléments html dans les différents navigateurs

J'ai besoin de configurer un code HTML <img src=""/> opacité de cet objet en JavaScript dans tous les navigateurs.

Dans Firefox, je le fais avec ligne:

imageobject.style.MozOpacity=opacity/100;

Qu'est-ce que le bon code javascript pour définir l'opacité d'un élément dans les différents navigateurs?

InformationsquelleAutor merveotesi | 2011-12-16
  1. 33
    img.style.opacity = .5; //For real browsers;
img.style.filter = "alpha(opacity=50)"; //For IE;

    Vous n'avez pas besoin de renifler l'agent de l'utilisateur, il suffit de mettre les deux valeurs que les navigateurs ignorent les hors de propos.

    • "Pour de vrais navigateurs", "IE" lol
    InformationsquelleAutor Dennis
  2. 5

    Définir l'Opacité d'un élément en Javascript:

    Il y a beaucoup de façons de le faire.

    Exemple 1, définir les éléments de style de l'attribut donnant l'opacité de 50% comme ceci:

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

    Exemple 2, si vous prenez l'élément de document.getElementbyId ensuite, vous pouvez affecter un nombre entre 0 et 1 pour son style.l'opacité de la propriété. Le texte est fixé à 20% d'opacité.

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

    Exemple 3, faire un sélecteur CSS intégré dans le HTML qui fait référence à la classe de votre div. Le texte dans le div est noir, mais apparaît grisâtre à cause de son opacité à 50%.

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

    Exemple 4, Importer jQuery. Faire un simple élément div. Prenez la div à l'aide de jQuery et de l'ensemble de son contenu html d'un élément span qui définit sa propre opacité.

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

    Exemple 5,

    Importer jQuery. Donner votre div de classe. Sélectionnez l'élément par sa classe et de définir sa .propriété css en passant le premier paramètre que l'opacité et le 2ème paramètre sous la forme d'un nombre entre 0 et 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>

    Exemple 6, Définir le style de votre élément pour avoir une couleur rgba

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

    Exemple 7, l'Utilisation de jQuery pour le navigateur peut prendre 4 secondes de la fermeture de l'élément à 10% d'opacité.

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

    Exemple 8, utilisez la méthode pour animer dire jquery de prendre 5 secondes pour changer l'opacité de 5%.

    <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>
    InformationsquelleAutor Eric Leschinski
  3. 1

    Vous n'avez pas besoin d'utiliser des fournisseurs de préfixes spécifiques, ou la détection du navigateur...

    Juste mis opacity. Firefox, Chrome et Safari ont pris en charge la simple opacity pour un certain temps maintenant, et IE9 et de soutien opacity. filter fonctionne sous IE.

    InformationsquelleAutor Ry-
  4. 1

    Dans chrome, vous venez de définir imgobject.style.opacity=0.5; dans IE imgobject.style.filter='alpha(opacity=50)'.

    InformationsquelleAutor Krzysztof