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

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

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

Ответы

Ответ 1

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

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

Ответ 2

Установите непрозрачность элемента в 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>

Статус обезьяны: школьный;

Ответ 3

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

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

Ответ 4

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