it-swarm-pt.tech

Definindo a opacidade dos elementos html em diferentes navegadores

Eu preciso definir um HTML <img src=""/> opacidade do objeto em JavaScript em todos os navegadores.

No Firefox eu faço isso com a linha:

imageobject.style.MozOpacity=opacity/100;

Qual é o código javascript adequado para definir a opacidade de um elemento em diferentes navegadores?

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

Você não precisa farejar o agente do usuário, basta definir os dois valores, pois os navegadores ignorarão o irrelevante.

35
Dennis

Defina a opacidade de um elemento em Javascript:

Há muitas maneiras de fazer isso.

Exemplo 1, defina o atributo style style dando 50% de opacidade da seguinte forma:

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

Exemplo 2, se você pegar o elemento com document.getElementbyId, poderá atribuir um número entre 0 e 1 à sua propriedade style.opacity. O texto está definido para 20% de opacidade.

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

Exemplo, crie um seletor CSS incorporado no HTML que faça referência à classe da sua div. O texto dentro da div é preto, mas parece acinzentado porque sua opacidade é de 50%.

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

Exemplo 4, Importar jQuery. Faça um elemento div simples. Pegue a div usando jQuery e defina seu conteúdo html como um elemento span que define sua própria opacidade.

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

Exemplo 5,

Importe jQuery. Dê uma aula à sua div. Selecione o elemento por sua classe e defina sua propriedade .css passando o primeiro parâmetro como opacidade e o segundo parâmetro como um número entre 0 e 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>

Exemplo 6, Defina o estilo do seu elemento para ter uma cor de rgba

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

Exemplo 7, use o jQuery para que o navegador demore 4 segundos para diminuir o elemento para 10% de opacidade.

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

Exemplo 8, use o método animate para dizer ao jquery que leva 5 segundos para alterar a opacidade para 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>
6
Eric Leschinski

Você não precisa usar prefixos específicos do fornecedor ou detecção do navegador ...

Basta definir opacity. Firefox, Chrome e Safari suportam o simples opacity por um tempo agora, e o IE9 e superior opacity. filter funciona no IE .

1
Ry-

Em chrome, você acabou de definir imgobject.style.opacity=0.5; in IE imgobject.style.filter='alpha(opacity=50)').

1
Krzysztof