Установка непрозрачности html-элементов в разных браузерах - PullRequest
Новая
       7

Установка непрозрачности html-элементов в разных браузерах

13 голосов
/ 17 декабря 2011

Мне нужно установить непрозрачность объекта HTML <img src=""/> в JavaScript во всех браузерах.

В Firefox я делаю это с помощью строки: 

imageobject.style.MozOpacity=opacity/100;

Каков правильный код javascript для установки непрозрачности элемента в разных браузерах?

Ответы [ 4 ]

34 голосов
/ 17 декабря 2011 
img.style.opacity = .5; //For real browsers;
img.style.filter = "alpha(opacity=50)"; //For IE;

Вам не нужно прослушивать пользовательский агент, просто установите оба значения, поскольку браузеры проигнорируют не относящееся к делу.

5 голосов
/ 26 октября 2013

Установить непрозрачность элемента в Javascript:

Есть много способов сделать это.

Пример 1 , установите атрибут стиля элементов, обеспечив непрозрачность 50%, как это: 

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

Пример 2 , если вы возьмете элемент с document.getElementbyId, вы можете присвоить число от 0 до 1 его свойству style.opacity. Текст имеет непрозрачность 20%. 

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

Пример 3 , сделать CSS-селектор, встроенный в HTML, который ссылается на класс вашего div. Текст внутри div черный, но выглядит сероватым, потому что его непрозрачность составляет 50%. 

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

Пример 4 , импорт jQuery. Сделайте голый элемент div. Захватите div с помощью jQuery и установите его html-содержимое на элемент span, который устанавливает свою непрозрачность. 

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

Пример 5 ,

Импорт jQuery. Дайте вашему div класс. Выберите элемент по его классу и установите его свойство .css, передавая первый параметр как непрозрачность, а второй параметр как число от 0 до 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>

Пример 6 , установить стиль вашего элемента, чтобы иметь цвет rgba 

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

Пример 7 . Используйте jQuery, чтобы браузеру потребовалось 4 секунды для затухания элемента до 10% непрозрачности. 

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

Пример 8 , используйте метод animate, чтобы jquery потратил 5 секунд, чтобы изменить непрозрачность до 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>
1 голос
/ 17 декабря 2011

В Chrome вы просто устанавливаете imgobject.style.opacity=0.5; в IE imgobject.style.filter='alpha(opacity=50)'.

1 голос
/ 17 декабря 2011

Вам не нужно использовать специфичные для поставщика префиксы или обнаружение в браузере ...

Просто установите opacity.Firefox, Chrome и Safari уже некоторое время поддерживают простую opacity, а IE9 и выше поддерживают opacity.filter работает в IE.

...