Setting opacity of html elements in different browsers

Question

I need to set an HTML object\'s opacity in JavaScript in all the browsers.

In Firefox I do it with line:

imageobje         


        

Answer 1

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:

  
this text has 50% opacity.
  

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.

 
the text
 

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

  
  
This text is black but appears grey on screen

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.

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.

 
 
the text
 

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

  This text color is black, but opacity of 0.5 makes it look grey.

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

 
 
the text
 

Example 8, use the animate method to tell jquery to take 5 seconds to change the opacity to 5%.

 
 
the text