Menu
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?
719
To change the opacity of a HTML Element using JavaScript, get reference to the HTML Element element, and assign required opacity value to the element. style. opacity property. Opacity value ranges from 0 to 1.
The opacity CSS property sets the opacity of an element.
Changing the opacity of the background color only To achieve this, use a color value which has an alpha channel—such as rgba. As with opacity , a value of 1 for the alpha channel value makes the color fully opaque. Therefore background-color: rgba(0,0,0,. 5); will set the background color to 50% opacity.
One approach you can use is to put the background-image styles in a pseudo-element of the parent element. Since the pseudo-element is a sort of child of the parent, you can change the opacity of it without affecting the text content.
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.
185
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>
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.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
