CODEWITHSUNDEEP
javascriptopacity
merveotesi
merveotesi

Reputation: 2193

Setting opacity of html elements in different browsers

I need to set an HTML <img src=""/> object's opacity in JavaScript in all the browsers.

In Firefox I do it with line:

imageobject.style.MozOpacity=opacity/100;

What is the proper javascript code to set the opacity of an element in different browsers?

Upvotes: 16

Views: 47953

Answers (4)

Eric Leschinski
Eric Leschinski

Reputation: 154101

Set the Opacity of an element in Javascript:

There are many ways to do this.

Example 1, set the elements style attribute giving opacity 50% like this:

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

Example 2, if you grab the element with document.getElementbyId then you can assign a number between 0 and 1 to its style.opacity property. The text is set to 20% opacity.

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

Example 3, make a CSS selector embedded in the HTML that references the class of your div. The text within the div is black, but appears greyish because its opacity is 50%.

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

Example 4, Import jQuery. Make a bare div element. Grab the div using jQuery and set its html contents to a span element which sets its own opacity.

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

Example 5,

Import jQuery. Give your div a class. Select the element by its class and set its .css property passing the first parameter as opacity and the 2nd parameter as a number between 0 and 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>

Example 6, Set the style of your element to have a color of rgba

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

Example 7, Use jQuery to have the browser take 4 seconds to fade out element to 10% opacity.

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

Example 8, use the animate method to tell jquery to take 5 seconds to change the opacity to 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>

Upvotes: 8

Dennis
Dennis

Reputation: 32608

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

You don't need to sniff the user agent, just set both values as browsers will ignore the irrelevant one.

Upvotes: 40

Krzysztof
Krzysztof

Reputation: 16150

In chrome you just set imgobject.style.opacity=0.5; in IE imgobject.style.filter='alpha(opacity=50)'.

Upvotes: 1

Ry-
Ry-

Reputation: 225281

You don't need to use vendor-specific prefixes, or browser detection...

Just set opacity. Firefox, Chrome and Safari have supported the simple opacity for a while now, and IE9 and up support opacity. filter works in IE.

Upvotes: 1

Related Questions