发表新帖
发表新帖

Setting opacity of html elements in different browsers

后端 未结
关注
4 1352
不要未来只要你来
不要未来只要你来 2020-12-15 21:44

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

In Firefox I do it with line:

imageobje
相关标签:
4条回答
  • 南方客
    2020-12-15 22:31 
    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.

    0 讨论(0)
  • 甜味超标
    2020-12-15 22:34

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

    0 讨论(0)
  • 清酒与你
    2020-12-15 22:42

    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>
    0 讨论(0)
  • 孤独总比滥情好
    2020-12-15 22:43

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题